title: Smooth scrolling with just pure css
body: <p>How can I make a smooth scrolling with just pure css.  </p>
  
  <p>I have this code <a href="http://jsfiddle.net/dN4S4/"><strong>Fiddle</strong></a></p>
  
  <p><strong>HTML</strong> </p>
  
  <pre><code>&lt;a id="up" href="#down"&gt;down&lt;/a&gt;
  &lt;div class="up"&gt;&lt;/div&gt;
  
  &lt;a id="down" href="#up"&gt;up&lt;/a&gt;
  &lt;div class="down"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.up {
      width:100px;
      height: 600px;
      background-color: red;
  }
  
  .down {
      width:100px;
      height: 400px;
      background-color: yellow;
  }
  </code></pre>
  
  <p>I know <code>:target</code> can help but I don't know how to use it with <code>transition</code>.</p>