Search code examples
javascriptjqueryjquery-selectorsscroll

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

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.

Solution

  • 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();.