Question

What I want is use an effect that is much smoother to scroll down and up, than the function I have.

I have an outer div (with overflow:hidden) and a div smaller in width ( class=’all_content’).

<a href='#' class='up'>Up</a> 
<a href='#' class='down'>Down</a>
<div class='container'>
<div class='all_content'> All the content is here </div>
</div>

I have that code:

$(".down").click(function () {
        $(".all_content").animate({marginTop: '-=20px'}, 0);
    });

$(".up").click(function () {
        $(".all_content").animate({ marginTop: '+=20px' }, 0);
    }); 

But it feels really sloppy with that +20px margin.

Can I use slideDown()? Should I use the scrollTop with it?

Thanks in advance

Answer 1

You’ll want to the scrollTo() plugin, which you can call like this:

$(".all_content").scrollTo({top: "+20px"}, 1000);

Edit: Here’s a revised version of the code you posted:

$(".down").click(function() {
    $(".all_content").scrollTo({
        top: '-=20px'
    }, 1000);
});

$(".up").click(function() {
    $(".all_content").scrollTo({
        top: '+=20px'
    }, 1000);
});​

Make sure you include the scrollTo plugin before you include your main js file(s).