Detect The Distance The User Has Scrolled With jQuery

A minimal JQuery script that tracks how deep the users scroll on your page and displays the scroll depth as a live update percentage bar.

See also:

• Creating A Circular Reading Progress Indicator with jQuery and SVG
• jQuery Plugin For Easy Scroll Depth Detection - Scroll Detection

How to use it:

1. Create an element to display the percentage text.

<h1>Scroll Percentage: 0%</h1>

2. Create elements to display a scroll percentage bar.

<div class="top-bar"></div>
<div class="scroll"></div>

3. A little CSS to style the percentage bar.

.top-bar {
  height: 0.5em;
  width: 100%;
  background: rgba(0, 0, 0, 0.15);
}

.scroll {
  height: 0.5em;
  width: 0%;
  background: #e74c3c;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.15), 2px 4px 8px rgba(0, 0, 0, 0.15);
  position: relative;
  top: -0.5em;
}

3. Include the latest version of jQuery library from a CDN.

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

4. The Javascrip (jQuery) to detect the scroll depth and render a progress bar within the element 'scroll'.

$(document).scroll(function(e){
  var scrollAmount = $(window).scrollTop();
  var documentHeight = $(document).height();
  var windowHeight = $(window).height();

  var scrollPercent = (scrollAmount / (documentHeight - windowHeight)) * 100;
  var roundScroll = Math.round(scrollPercent);
  
  $(".scroll").css("width", (scrollPercent + '%'));
  $("h1").text("Scroll Percentage: " + roundScroll + '%');
});

---

This awesome jQuery plugin is developed by mblode. For more Advanced Usages, please check the demo page or visit the official website.