title: Use two buttons (images) to scroll a DIV which is set to overflow: hidden; with jQuery
body: <p>i am having a div container:</p>
  
  <pre><code>.mask { 
      height: 157px;
      overflow: hidden;
  }
  </code></pre>
  
  <p>the content inside this container is longer than 157px. i have two links (images) that i want to use to scroll the content inside the container up or down:</p>
  
  <pre><code>&lt;ul class="scroll"&gt;
  &lt;li&gt;&lt;a href="#"&gt;&lt;img src="img/text-down-icn.png" alt="scroll down" /&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;&lt;img src="img/text-up-icn.png" alt="scroll up" /&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>how can i get those two links to scroll the content of inside the container?</p>
  
  <p>thanks a lot</p>
  
  <p>===========================================</p>
  
  <p>Thanks for your help. Turns out it works best using the scrollTo Plugin (http://plugins.jquery.com/project/ScrollTo).</p>
  
  <pre><code>$(document).ready(function(){ 
      $(".down").click(function () {
          $('.mask').scrollTo( '+=156px', 500 );;
      });
  
      $(".up").click(function () {
          $('.mask').scrollTo( '-=156px', 500 );;
      });
  }); 
  </code></pre>