title: Jquery div scroll question
body: <p>I have a page that requires multiple divs with the same class name. Within each div is text that I'd like to scroll via controllers.</p>
  
  <p>I can't figure out how to make it so that the controllers in each div only scroll the text that's in their specific div and not the text in every div that shares the same class on the page. Each of the divs look like this:</p>
  
  <pre><code>&lt;div class="box-wrap"&gt; 
      &lt;div class="box"&gt; Text that will be scrolled &lt;/div&gt; 
      &lt;div class="controllers"&gt; 
          &lt;div class="button1"&gt; Scroll Up &lt;/div&gt; 
          &lt;div class="button2"&gt; Scroll Down &lt;/div&gt; 
      &lt;/div&gt; 
  </code></pre>
  
  <p>Using the code below everything works but the buttons in each div will cause <em>every</em> div on the page to scroll:</p>
  
  <pre><code>$(".button1").click(function(){
    $(".block").animate({"top": "-=50px"}, "slow");
  });
  
  
  $(".button2").click(function(){
    $(".block").animate({"top": "+=50px"}, "slow");
  });
  </code></pre>
  
  <p>Changing code to  <code>$(".block", this).animate({"top": "+=50px"}, "slow");</code> makes it stop working altogether.</p>
  
  <p>Any ideas?</p>