title: Slowly scroll the content of a div on hover and stop on mouseoff
body: <p>Please take a look at this <a href="http://www.prozign.com.php53-17.ord1-1.websitetestlink.com/projects/" rel="nofollow">website</a></p>
  
  <p>I'm trying to implement two arrows on top and bottom of the gallery so when people mouse over the arrows, the content would scroll top and bottom respectively. </p>
  
  <p>Here is the code I'm currently using that scrolls the content down when you hover over the bottom arrow. But there are two issues with it:</p>
  
  <ol>
  <li>I want the scrolling to stop when the user mouses off </li>
  <li><p>Hopefully do not display the arrow(s) if there is no more content left to scroll</p>
  
  <pre><code>if ( $("body").hasClass('projects') ) {
      $("#jig1").height($(document).height() - 187);
  
      $("#scroll-to-bottom").hover(
          function () {
              $("#jig1").animate({ scrollTop: $(document).height() }, 10000);
          },
          function () {
  
          }
      );
  }
  </code></pre></li>
  </ol>
  
  <p>Can anyone offer an improved solution?</p>