Cross-browser method for detecting the scrollTop of the browser window

Question

What is the best cross-browser way to detect the scrollTop of the browser window? I prefer not to use any pre-built code libraries because this is a very simple script, and I don't need all of that deadweight.

Answer 1

function getScrollTop(){
    if(typeof pageYOffset!= 'undefined'){
        //most browsers except IE before #9
        return pageYOffset;
    }
    else{
        var B= document.body; //IE 'quirks'
        var D= document.documentElement; //IE with doctype
        D= (D.clientHeight)? D: B;
        return D.scrollTop;
    }
}

alert(getScrollTop())

Answer 2

Or just simple as:

var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

Answer 3

If you don't want to include a whole JavaScript library, you can often extract the bits you want from one.

For example, this is essentially how jQuery implements a cross-browser scroll(Top|Left):

function getScroll(method, element) {
  // The passed in `method` value should be 'Top' or 'Left'
  method = 'scroll' + method;
  return (element == window || element == document) ? (
    self[(method == 'scrollTop') ? 'pageYOffset' : 'pageXOffset'] ||
    (browserSupportsBoxModel && document.documentElement[method]) ||
    document.body[method]
  ) : element[method];
}
getScroll('Top', element);
getScroll('Left', element);

Note: you'll notice that the above code contains a browserSupportsBoxModel variable which is undefined. jQuery defines this by temporarily adding a div to the page and then measuring some attributes in order to determine whether the browser correctly implements the box model. As you can imagine this flag checks for IE. Specifically, it checks for IE 6 or 7 in quirks mode. Since the detection is rather complex, I've left it as an exercise for you ;-), assuming you have already used browser feature detection elsewhere in your code.

Edit: If you haven't guessed already, I strongly suggest you use a library for these sorts of things. The overhead is a small price to pay for robust and future-proof code and anyone would be much more productive with a cross-browser framework to build upon. (As opposed to spending countless hours banging your head against IE).

Answer 4

I've been using window.scrollY || document.documentElement.scrollTop.

window.scrollY covers all browsers except IEs.
document.documentElement.scrollTop covers IE.

Answer 5

function getSize(method) {
  return document.documentElement[method] || document.body[method];
}
getSize("scrollTop");

Answer 6

YUI 2.8.1 code does this:

function getDocumentScrollTop(doc) 
{
   doc = doc || document;

   //doc.body.scrollTop is IE quirkmode only
   return Math.max(doc.documentElement.scrollTop, doc.body.scrollTop);
}

I think jQuery 1.4.2 code (a bit translated for humans) and supposing I understood it properly does this:

function getDocumentScrollTop(doc) 
{
   doc = doc || document;
   win = doc.defaultView || doc.parentWindow; //parentWindow is for IE < 9

   result = 0;
   if("pageYOffset" in win) //I'don't know why they use this, probably they tested it to be faster than doing: if(typeof win.pageYOffset !== 'undefined')
      result = win.pageYOffset;
   else
      result = (jQuery.support.boxModel && document.documentElement.scrollTop) || 
               document.body.scrollTop;

   return result;
}

Unfortunatley extracting the value of jQuery.support.boxModel is almost impossible because you would have to add a temporary child element into document and do the same tests jQuery does.

Answer 7

I know its been quite a while since this thread was updated, but this is a function I created that allows developers to find the root element that actually hosts has a working "scrollTop" property. Tested on Chrome 42 and Firefox 37 for Mac OS X (10.9.5):

function getScrollRoot(){
    var html = document.documentElement, body = document.body,
        cacheTop = ((typeof window.pageYOffset !== "undefined") ? window.pageYOffset : null) || body.scrollTop || html.scrollTop, // cache the window's current scroll position
        root;

    html.scrollTop = body.scrollTop = cacheTop + (cacheTop > 0) ? -1 : 1;
    // find root by checking which scrollTop has a value larger than the cache.
    root = (html.scrollTop !== cacheTop) ? html : body;

    root.scrollTop = cacheTop; // restore the window's scroll position to cached value

    return root; // return the scrolling root element
}

// USAGE: when page is ready: create a global variable that calls this function.

var scrollRoot = getScrollRoot();

scrollRoot.scrollTop = 10; // set the scroll position to 10 pixels from the top
scrollRoot.scrollTop = 0; // set the scroll position to the top of the window

I hope you find this useful! Cheers.

Answer 8

This works well from IE5 to IE11. It also supports all major new browsers.

var scrollTop = (document.documentElement && document.documentElement.scrollTop) ||
                (document.body.scrollTop) || (document.scrollingElement);

Answer 9

No need extra library, use this snippet:

const scrollTop = 
    (window.pageYOffset !== undefined) ? 
     window.pageYOffset :
    (document.documentElement || document.body.parentNode || document.body).scrollTop;

Answer 10

I believe the best way to get scrollTop in modern browsers is to use

const scrollTop = document.scrollingElement.scrollTop

if this doesn't work you could also try

const scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop, document.scrollingElement.scrollTop)

Answer 11

to save you all the trouble use a framework such as jquery or mootools that calculates all these values in one line (cross browser) in mootools its $('element').getTop(); in jquery you will need a plugin named dimensions if i remember correctly although most of the time even without a framework you can actually use element.getScrollTop(); to get what you'll need the only problem is on IE7 and below this calculation is somewhat buggy as it doesn not take the position value of the element into consideration for example if you got a position: absolute css attribute for that element the calculation is performed on the parent element of that element