jQuery scrollTop() not working on 'body' element in Firefox

Question

I do not understand why the scrollTop() jquery function is not working on the 'body' element on Firefox.

$('body').scrollTop(0);

I fixed my issue using:

$(window).scrollTop(0);

However according to the jquery documentation scrollTop() is supposed to work on all elements like in this example:

$( "div.demo" ).scrollTop( 300 );

I have also tested with 'nav' and 'main' but it is not working either.

Answer 1

Scroll

$(window).scrollTop(0); seems to be supported by all browsers IE9+ (maybe IE8 but I don't test on that any more).

Animated Scroll

If you want to animate a scroll, jQuery returns an error if using the window object (1.11.2 tested). Instead, to animate a scroll, it's best to use both html and body to cover engines which utilise either one. So:

$('html, body').animate({scrollTop:0},500); will scroll to the top of the browser in half a second.

Scroll Position

You cannot use $('html,body').scrollTop() to find the current scroll position of the page - at least Chrome doesn't support this (always returns 0). Instead, to consistently find the scroll position of a page, it's necessary to use $(window).scrollTop();.

Answer 2

Use window if you want consistency between browsers.

$(window).scrollTop();