Smooth scrolling with just pure css [duplicate]

Question

How can I make a smooth scrolling with just pure css.

I have this code Fiddle

HTML

<a id="up" href="#down">down</a> <div class="up"></div>  <a id="down" href="#up">up</a> <div class="down"></div> 

CSS

.up {     width:100px;     height: 600px;     background-color: red; }  .down {     width:100px;     height: 400px;     background-color: yellow; } 

I know :target can help but I don't know how to use it with transition.

Answer 1

You need to use the target selector.

Here is a fiddle with another example: http://jsfiddle.net/YYPKM/3/