title: Vertical scroll on div text
body: <p>Currently my div is scrolling using two buttons (Up and Down) but I would like it to jump to top and jump to bottom with those two buttons with a vertical auto scroll (downwards) going on instead. How do I accomplish this in jQuery? Here is my code so far: <a href="http://jsfiddle.net/NkY8J/" rel="nofollow">http://jsfiddle.net/NkY8J/</a>.</p>
  
  <p>HTML</p>
  
  <pre><code>    &lt;div id="scroll"&gt;
           Content here and more content here&lt;br /&gt;&lt;br /&gt;
      Content here and more content here&lt;br /&gt;&lt;br /&gt;
      Content here and more content here&lt;br /&gt;&lt;br /&gt;
      Content here and more content here&lt;br /&gt;&lt;br /&gt;
      Content here and more content here&lt;br /&gt;&lt;br /&gt;
      Content here and more content here&lt;br /&gt;&lt;br /&gt;
      Content here and more content here&lt;br /&gt;&lt;br /&gt;
      Content here and more content here&lt;br /&gt;&lt;br /&gt;
      Content here and more content here&lt;br /&gt;&lt;br /&gt;
      Content here and more content here&lt;br /&gt;&lt;br /&gt;
      Content here and more content here&lt;br /&gt;&lt;br /&gt;
      Content here and more content here&lt;br /&gt;&lt;br /&gt;
      Content here and more content here&lt;br /&gt;&lt;br /&gt;
      Content here and more content here
        &lt;/div&gt;
                &lt;input id="scroll-up" class="btn" type="button" value="Up"/&gt;
                &lt;input id="scroll-down" class="btn" type="button" value="Down"/&gt;
  ​
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$(function() {
      var ele   = $('#scroll');
      var speed = 25, scroll = 5, scrolling;
  
      $('#scroll-up').mouseenter(function() {
          // Scroll the element up
          scrolling = window.setInterval(function() {
              ele.scrollTop( ele.scrollTop() - scroll );
          }, speed);
      });
  
      $('#scroll-down').mouseenter(function() {
          // Scroll the element down
          scrolling = window.setInterval(function() {
              ele.scrollTop( ele.scrollTop() + scroll );
          }, speed);
      });
  
      $('#scroll-up, #scroll-down').bind({
          click: function(e) {
              // Prevent the default click action
              e.preventDefault();
          },
          mouseleave: function() {
              if (scrolling) {
                  window.clearInterval(scrolling);
                  scrolling = false;
              }
          }
      });
  });
  ​
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#scroll {
      width: 200px;
      height: 100px;
      overflow: hidden;
      padding: 4px;
  }​
  </code></pre>