title: How to make a scrollable div scroll on click and mouseover using jQuery
body: <p>Using the markup below how would I get the "#content" div to scroll up or down when I click or hover over the "#scrollUp" or "#scrollDown" anchor tag. Scrolling should be smooth preferably. If clicked it should scroll a specific amount (for touch devices) if mouseover it can scroll until mouseout. </p>
  
  <pre><code> &lt;style&gt;  
           #content {
           overflow:auto;
           height: 50px; /*could be whatever*/
                   }
    &lt;/style&gt;
  
  &lt;a id="scrollUp" href="#"&gt;up&lt;/a&gt;
  &lt;a id="scrollDown" href="#"&gt;down&lt;/a&gt;
  
  &lt;div id="wrapper"&gt;
   &lt;div id="content"&gt;
  
    &lt;ul&gt;
      &lt;li&gt;some content here&lt;/li&gt;
      &lt;li&gt;some content here&lt;/li&gt;
      &lt;li&gt;some content here&lt;/li&gt;
      &lt;li&gt;some content here&lt;/li&gt;
      &lt;li&gt;some content here&lt;/li&gt;
      &lt;li&gt;some content here&lt;/li&gt;
    &lt;/ul&gt;
  
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>