Report intevals of percentage of webpage scrolled by user

jquery.reportViewProgress.js

/**
 * 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 ));

Work in progress. Need to convert this into a jquery plugin based off an event that takes resolution as input. It works as it is though. Just inject the script into any page using the gist embed. And watch the script report the scroll activity as user scrolls. It also makes an initial report if amount of page visible is greater than the set resolution.

Here's a working jsFiddle. Start scrolling on the output pane.

Updated the script to be a jQuery plugin. It can now be used as follows:

$(function(){
    $(window).reportViewProgress({
        reportResolution:10.0,
      onProgress: function(pct){
        $(".report").html(pct + "% page seen");
      }
    })
});

Updated working example on jsFiddle