Jquery div scroll question

I have a page that requires multiple divs with the same class name. Within each div is text that I'd like to scr开发者_JAVA技巧oll via controllers.

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:

<div class="box-wrap"> 
    <div class="box"> Text that will be scrolled </div> 
    <div class="controllers"> 
        <div class="button1"> Scroll Up </div> 
        <div class="button2"> Scroll Down </div> 
    </div> 

Using the code below everything works but the buttons in each div will cause every div on the page to scroll:

$(".button1").click(function(){
  $(".block").animate({"top": "-=50px"}, "slow");
});


$(".button2").click(function(){
  $(".block").animate({"top": "+=50px"}, "slow");
});

Changing code to $(".block", this).animate({"top": "+=50px"}, "slow"); makes it stop working altogether.

Any ideas?

First, there's no .block class in your sample code. Assuming you meant .box instead, you can use the parent() and prev() methods:

$(this).parent(".controllers").prev(".box").animate({"top": "+=50px"}, "slow");

$(".button1").click(function(){ 
    $(this).parents(".box-wrap").find(".box").animate({"top": "-=50px"}, "slow"); 
});

hope this helps.

Although if you are scrolling text i would recommend using scrollTop() not animating the "top" value.