Get page scrolling percentage

For some scrolling effects, you may need to know how much percent the page is scrolled. All we need is to know for that is the window height, window top position and document height.

[button url=”http://bassta.bg/demos/scroll-percent/” style=”green” size=”large” type=”square” icon=”view” target=”_blank”] VIEW DEMO [/button] [button url=”http://bassta.bg/downloads/scroll-percent.zip” style=”blue” size=”large” type=”square” icon=”download” target=”_blank”] DOWNLOAD FILES [/button]

The equation is scroll top / (document height – window height). With some help from jQuery we can easily get those values:

var $window = $(window);
var documentHeight = $(document).height();
var windowHeight = $window.height();
var scrollTop = $window.scrollTop();

$window.on("scroll", function() {
	scrollTop = $(window).scrollTop();				
	var scrollPercent = (scrollTop) / (documentHeight - windowHeight); //gives us the scroll percent range from 0 to 1

});

If we need the scroll percent from 0-100 just multiply scrollPercent by 100:

Math.round(scrollPercent*100)

The scrolling percentage can be used in all kind of effects. In next tutorial I will show you how to animate TimelineLite depending on page scroll.