title: Auto Scroll CSS Button
body: <p>How do I make the the page auto scroll to the bottom of the dropdown button on hover? I want the bottom of the page to meet the bottom of the button and I don't want it to scroll really fast. I've tried a bit of javascript but it doesn't seem to work. Here's the button.</p>
  
  <p><a href="http://jsfiddle.net/5gq9E/" rel="nofollow">http://jsfiddle.net/5gq9E/</a></p>
  
  <p>Here's the HTML</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  
  &lt;link href="/styles.css" rel="stylesheet" type="text/css"&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id='cssmenu'&gt;
  &lt;ul&gt;
  &lt;li class='has-sub last'  id="iefix"&gt;&lt;a rel=nofollow href='#'&gt;&lt;span&gt;Choose a 
  model&lt;/span&gt;&lt;/a&gt;
    &lt;ul&gt;
       &lt;li  id="iefix"&gt;&lt;a rel=nofollow href='#'&gt;&lt;span&gt;HTC Aria&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
       &lt;li  id="iefix"&gt;&lt;a rel=nofollow href='#'&gt;&lt;span&gt;HTC Rhyme&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
       &lt;li  id="iefix"&gt;&lt;a rel=nofollow href='#'&gt;&lt;span&gt;HTC Surround&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
       &lt;li  id="iefix"&gt;&lt;a rel=nofollow href='#'&gt;&lt;span&gt;HTC Sensation&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
       &lt;li  id="iefix"&gt;&lt;a rel=nofollow href='#'&gt;&lt;span&gt;HTC Thunderbolt&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
       &lt;li  id="iefix"&gt;&lt;a rel=nofollow href='#'&gt;&lt;span&gt;HTC One S&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
       &lt;li  id="iefix"&gt;&lt;a rel=nofollow href='#'&gt;&lt;span&gt;HTC One X&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
       &lt;li  id="iefix"&gt;&lt;a rel=nofollow href='#'&gt;&lt;span&gt;HTC Evo 4G&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
       &lt;li  id="iefix"&gt;&lt;a rel=nofollow href='#'&gt;&lt;span&gt;HTC Inspire 4G&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
       &lt;li  id="iefix"&gt;&lt;a rel=nofollow href='#'&gt;&lt;span&gt;HTC MyTouch 4G&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
       &lt;li  id="iefix"&gt;&lt;a rel=nofollow href='#'&gt;&lt;span&gt;HTC Evo 4G LTE&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
       &lt;li  id="iefix"&gt;&lt;a rel=nofollow href='#'&gt;&lt;span&gt;HTC Evo Shift 4G&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
       &lt;li  id="iefix"&gt;&lt;a rel=nofollow href='#'&gt;&lt;span&gt;HTC Evo Droid Incredible 2&lt;/span&gt;  
  &lt;/a&gt;&lt;/li&gt;
       &lt;li  id="iefix"&gt;&lt;a rel=nofollow href='#'&gt;&lt;span&gt;HTC Windows Phone 8X&lt;/span&gt;&lt;/a&gt;  
  &lt;/li&gt;
       &lt;li class='last'  id="iefix"&gt;&lt;a rel=nofollow href='#'&gt;&lt;span&gt;HTC One&lt;/span&gt;&lt;/a&gt;
  &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>