Jquery Scrolltop Inconsistent Across Browsers

In Chrome and Safari, $('body').scrollTop(1000) goes where expected. In IE and FF, nothing happens. In IE and FF, $(window).scrollTop(1000) works, but they go to different places.

Solution 1:

$(jQuery.browser.webkit ? "body": "html").animate({ scrollTop: myTop }, myDur);

Webkit browsers (Chrome/Safari, both Mac and Win) use "body", others (FF/Opera/IE 7-9) use "html"

Gotta love browser detection.

Solution 2:

Try

$(document).scrollTop("...");

Solution 3:

You need to apply scrollTop to either body or html depending on the browser, but there's no harm applying it to both. Since .scrollTop() applies to the first element in the set, but .animate() applies to all elements, you can do this:

$('body, html').animate({
  scrollTop: 1000
}, 'fast');

If you want the change to apply immediately, change the speed ('fast') to 0. Alternatively, you can use the following, but I like the above syntax better:

$('body, html').each(function() { $(this).scrollTop(1000); });