Question

I’m trying to scroll down and up with buttons. I wrote lot of code but all didn’t work.
I explain with codes.

<div class="component">
  <div class="go_up"></div>
  <div class="go_down"></div>
  <div id="content1" class="componentin">
    <div id="item"></div>
  </div>
</div>

this is my html code. I want to scroll item by px. Also i use this html code more than once in page so code must be more specific. i tried to animate first element which class named item after button div. And this is my jquery code (not work)

$(".go_up").click(function(){
    var this1 = $(this);
    var content = $(this1 + '+ .componentin');
    var $component = $(content + ':first-child');
    $component.animate({"marginTop": "-=50px"}, "slow");
});
$(".go_down").bind('click',function(){
    var this1 = $(this);
    var content = $(this1 + '+ .componentin');
    var $component = $(content + ':first-child');
    $component.animate({"marginTop": "+=50px"}, "slow");
});

thanks for help

Answer 1

Your selector expression is incorrect. The code $('element1 + element2') only selects immediate siblings.

//works
$('element1 + element2')
<element1 />
<element2 />

//but doesn't work here
$('element1 + element2')
<element1 />
<something />
<element2 /> 

Instead use the sibling selector.

http://jsfiddle.net/F7UqC/

$(".go_up").click(function(){
    $(this)
        .siblings('.componentin')
        .children('#item')
        .animate({"marginTop": "-=50px"}, "slow");
});
$(".go_down").bind('click',function(){
    $(this)
        .siblings('.componentin')
        .children('#item')
        .animate({"marginTop": "+=50px"}, "slow");
});