Please help to fix jQuery scrolling

Question

Page must be scrolled after clicking on link with id (let it be #link).

Here is my code, which doesnt work:

$(document).ready(function(){
    $("#link").click(function () { 
     $(this).animate({ scrollTop: 2000 }, 'slow'); 
    });
});

But this one works, after the page loads it slowly scrolls to the bottom of the page:

$(document).ready(function() {
    $('html, body').animate({ scrollTop: 6000 }, 'slow'); 
});

Height of the body is 6000px.

Answer 1

It looks like your trying to animate 'this' which would be the link!

You should try $(window).animate instead! or maybe even document, sorry not sure!

Answer 2

In your first example, You're setting the scrollTop of the actual link element which has nothing within it to scroll. ( no overflow )

$(document).ready(function(){
    $("#link").click(function () { 
        $("body").animate({ scrollTop: 2000 }, 'slow'); 
    });
});

Hers's a pretty good explanation of https://developer.mozilla.org/En/DOM/Element.scrollTop

Answer 3

try $('html,body').animate to support all browsers