html/css buttons that scroll down to different div sections on a webpage

HTML

<a href="#top">Top</a>
<a href="#middle">Middle</a>
<a href="#bottom">Bottom</a>
<div id="top"><a href="top"></a>Top</div>
<div id="middle"><a href="middle"></a>Middle</div>
<div id="bottom"><a href="bottom"></a>Bottom</div>

CSS

#top,#middle,#bottom{
    height: 600px;
    width: 300px;
    background: green; 
}

Example http://jsfiddle.net/x4wDk/

this:

<input type="button" onClick="document.getElementById('middle').scrollIntoView();" />

For something really basic use this:

<a href="#middle">Go To Middle</a>


Or for something simple in javascript check out this jQuery plugin ScrollTo. Quite useful for scrolling smoothly.