Make a div vertically scollable inside another div using scrollTop in jQuery

Question

I have a div #container inside another div .bloc_1_medias.

#container height is larger than one of .bloc_1_medias.

I would like to make the #container div scroll inside my .bloc_1_medias using scrollTop when clicking on my text "next" and "previous" with a fixed gap.

I want also the scroll bar of the .bloc_1_medias to be hidden.

Here is my js:

$('#next_nav').click(function () {
    $( "#container" ).animate({
        scrollTop: '+=156px'
    });
});

$('#prev_nav').click(function () {
    $( "#container" ).animate({
        scrollTop: '-=156px'
    });
});

And a here is a JSFidlle:

http://jsfiddle.net/aaWLJ/6/

Can anybody help me with this?

Answer 1

You should animate parent container scrollTop:

$(".bloc_1_medias").animate({
    scrollTop: '+=156px'
});

Demo: http://jsfiddle.net/dfsq/aaWLJ/7/