Question

I have an overflow div with items hidden. I’d like to scroll the hidden area on click on UP/DOWN elements:

$("#up").click(function(){
    $("#container").find(".box:first").animate({"top": "+=20px"}, "slow");
});
$("#down").click(function(){
    $("#container").find(".box:first").animate({"top": "-=20px"}, "slow");
});

<style>
#itemsList {
    height:60px;
}
.box {
    height:20px;
}
</style>

<div id="container">                        
    <div id="up" class="scroll">UP</div>
    <div id="itemsList">
        <div id="item1" class="box">item 1</div>
        <div id="item2" class="box">qweqweqwe</div>
        <div id="item3" class="box">qqqqqqqq</div>
        <div id="item4" class="box">eeeeeee</div>
        <div id="item5" class="box">rrrrrrrr</div>
        <div id="item6" class="box">tttttt 11</div>
    </div>
    <div id="down" class="scroll">DOWN</div>
</div>

Not sure what I’m missing… Here’s my JSfiddle.

Answer 1

I’d change your jQuery selector from find('.box:first') to just find('.box'), then simply add position: relative; to your .box class in CSS.