jQuery scrollTop inconsistent across browsers

javascript jquery scrolltop
Nathan Loyer picture Nathan Loyer · Jan 28, 2012 · Viewed 7.4k times · Source

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. It also works in Chrome and Safari, but they both go to a different place as well. They seems to be up to 300-500 pixels off.

Is there any consistent way to set the scrollTop property that works cross browser, and if not, why doesn't jQuery abstract this?

I'd like to animate it as well, which works fine in Chrome and Safari, but not in the other browsers.

Is my only option to do browser detection? (bad practice) Or is there some better way?

Answer

bluescrubbie picture bluescrubbie · Feb 10, 2012

$(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.

Related questions

$(window).scrollTop() vs. $(document).scrollTop()

What's the difference between: $(window).scrollTop() and $(document).scrollTop() Thanks.

Read More
$(document).scrollTop() always returns 0

I'm simply trying to do something once the scroll position of the page reaches a certain height. However scrollTop() is returning 0 or null no matter how far down I scroll. This is the help function I'm using to check the …

Read More
Trigger $(window).scroll();

When I call $("body").animate({scrollTop: someValue}); I want $(window).scroll(function() { }); to be called too. How can I achieve that? I have tried with $(window).trigger("scroll") and $(window).triggerHandler("scroll") without success. The code EDIT: Problem solved. There …

Read More