Cross-Browser Method to Determine Vertical Scroll Percentage in Javascript

Question

How can I find out what percentage of the vertical scrollbar a user has moved through at any given point?

It's easy enough to trap the 'onscroll' event to fire when the user scrolls down the page, but how do I find out within that event how far they have scrolled? In this case, the percentage particularly is what's important. I'm not particularly worried about a solution for IE6.

Do any of the major frameworks (Dojo, jQuery, Prototype, Mootools) expose this in a simple cross-browser compatible way?

Cheers,

Answer 1

Using jQuery

$(window).scrollTop();

will get you the scroll position, you can then work out from there what the percentage is based on the window height.

There is also a standard DOM property scrollTop that you can use like document.body.scrollTop however I'm not sure how this behaves cross-browser, I would assume if there are inconsistencies then the jQuery method accounts for these.

Answer 2

This should do the trick, no libraries required:

function currentScrollPercentage()
{
    return ((document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight) * 100);
}

Answer 3

If you're using Dojo, you can do the following:

var vp = dijit.getViewport();
return (vp.t / (document.documentElement.scrollHeight - vp.h));

Which will return a value between 0 and 1.