Correct HTML scrolling element of main viewport (+jQuery)

Question

When I want to scroll a website by javascript code what is the corrent element to set the .scrollTop property on?

Is it window, document, document.body or html element?

Does jQuery have some trick to detect the intention to scroll the main viewport and unify the calls? It seems to me that sometimes $(window).scroolTop(value) works, but sometimes it doesn't.

bobince · Accepted Answer · 2010-12-07T11:43:43.227

Normally, the <html> element, aka document.documentElement. However if you are using Quirks Mode, <body> (document.body) represents the viewport instead. (HTML/CSS doesn't explicitly state/require this, but it is how all modern browsers work.)

You don't ever want to be in Quirks Mode, but if you're writing a script for inclusion on other people's pages you will have to deal with it:

var viewport= document.compatMode==='BackCompat'? document.body : document.documentElement;
// do something with viewport.scrollTop

jQuery uses window.scrollTo() instead of setting the scroll properties directly. Either way is pretty much the same in practice. You could argue that using scrollTo is a bit cleaner in that it avoids relying on the viewport being represented by a particular element, but then jQuery still has to use scrollTop/scrollLeft to read the current value of the ‘other’ property anyway, so no big win. You can use pageXOffset/pageYOffset to read the current scroll position without relying on a particular element, but it's not supported everywhere so you still have to fallback to the scrollTop method.

Sadly none of these properties/methods have been standardised in the past. CSSOM Views finally address this.

Nishad · Answer 2 · 2012-04-07T01:23:56.573

There's a rider to bobince's answer, which is that Webkit browsers incorrectly set documentElement.scrollTop to zero regardless of whether you are in quirks or standards mode; therefore, you cannot completely rely on his one-liner.

https://bugs.webkit.org/show_bug.cgi?id=9248

http://code.google.com/p/chromium/issues/detail?id=2891

Someone with sufficient privileges should make this a comment to bobince's answer so that it is not missed, and I can then delete this post.

score 0 · Answer 3 · answered Dec 07 '10 at 10:33

0

Depends on what you are scrolling, document/Window or a division

answered Dec 07 '10 at 10:33

Starx

77,474
47
185
261

I'm scrolling the "most main" "thing". Just as if the user drags the main scrollbar of the browser window. There are no other scrollable elements on the page. – tillda Dec 07 '10 at 10:39
In that case, it is window, you have to use. Why dont you post your code, so that we can take a look at it – Starx Dec 07 '10 at 10:42
See this http://stackoverflow.com/questions/832860/how-to-scroll-the-window-using-jquery-scrollto-function – Starx Dec 07 '10 at 10:46

score 0 · Answer 4 · answered Dec 07 '10 at 10:43

I had this problem before as well, and it behaved quite differently in a number of browsers. I ended up using this rather horrible piece of code:

function scrollToTop() {
    $('body, html').scrollTop(0);

    if ($.browser.webkit || $.browser.safari) {
        // Hack for webkit browsers: hide and show canvas layer so window will scroll up.
        // (scrollTop does not work right).
        $('#canvas').hide();
        window.setTimeout(function () {
            $('#canvas').show();
        }, 0);
    }
}

However, I only needed to scroll to the top, which is easier. I'm not sure how you would do this if you want to scroll to a specific point. Maybe use anchors?

Correct HTML scrolling element of main viewport (+jQuery)

4 Answers4