Skip to content

Instantly share code, notes, and snippets.

@shaunakv1
Last active April 13, 2016 16:05
Show Gist options
  • Save shaunakv1/4d187d9f445427ed31814735a575801c to your computer and use it in GitHub Desktop.
Save shaunakv1/4d187d9f445427ed31814735a575801c to your computer and use it in GitHub Desktop.
Report intevals of percentage of webpage scrolled by user
/**
* Author: Shaunak Vairagare
* Licence: MIT
* Plugin Url: https://gist.github.com/shaunakv1/4d187d9f445427ed31814735a575801c
*
* jQuery Plugin to report viewProgress on a element. Usually this will be used on window object, to
* detect how much of the page user has seen, and to get a callback each time.
*
* Usage Example:
* $(window).reportViewProgress({
* reportResolution:10.0,
* onProgress: function(pct){
* console.log(pct + "% page seen");
* }
* })
*
* Options:
*
* reportResolution: If specified, the onProgress callback will only be called after user views in steps the percentage of page specified here.
*
* onProgress: callback that provides percent of page viewed by user, as the user scrolls.
**/
(function ( $ ) {
$.fn.reportViewProgress = function( options ) {
var elem = this;
// This is the easiest way to have default options.
var settings = $.extend({
//At what resolution in percentage would you like to know if user has scrolled
reportResolution: null,
// callback function to report the page viewed amount. if reportResolution is
// not specified onView will report every scroll percent.
// If reportResolution is specified than the callback with report progress in steps
// of reportResolution
onProgress: null
}, options );
//At what resolution in percentage would you like to know if user has scrolled
var reportResolution = 10;//%
//Tracking Variables
var lastScrollTop = $(elem).scrollTop();
var seen = $(elem).height() + lastScrollTop;
var seenPct = seen*100.00/$(document).height();
var reported = 0;
// Start monitoring the scroll and report the exact percnt of page seen
$(elem).scroll(function(){
if( $(elem).scrollTop() > lastScrollTop){
seen = seen + $(elem).scrollTop() - lastScrollTop;
lastScrollTop = $(elem).scrollTop();
seenPct = Math.round(seen * 100.00 / parseFloat($(document).height()));
if(settings.reportResolution) reportScrollEvent(seenPct)
else if(settings.onProgress) settings.onProgress(seenPct);
}
})
// function that quantizes the seen percentage to the resolution user has set, and reports once per every resolution crossed
function reportScrollEvent(seenPct){
var current = (seenPct - ( seenPct % settings.reportResolution)) / settings.reportResolution;
if(current > reported){
reported = current;
//console.log(reported * settings.reportResolution + "% page seen");
if(settings.onProgress) settings.onProgress(reported * settings.reportResolution);
}
}
//make an initial report in case page is already scrolled on load
if(settings.reportResolution) reportScrollEvent(seenPct)
else if(settings.onProgress) settings.onProgress(seenPct);
//return the dom to enable chaning if needed
return elem;
};
}( jQuery ));
@shaunakv1
Copy link
Author

Updated working example on jsFiddle

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment