[css] Smooth scrolling with just pure css

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.

This question is related to css

The answer is


You need to use the target selector.

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