Detect The Distance The User Has Scrolled With jQuery
File Size: | 4.23 KB |
---|---|
Views Total: | 4226 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.