Top Scroll Progress Indicator Plugin With jQuery - Scrollgress

File Size: 215 KB
Views Total: 2559
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Top Scroll Progress Indicator Plugin With jQuery - Scrollgress

Just another jQuery scroll progress indicator plugin which keeps track of scroll events and visualizes the scroll depth into a slim progress bar at the top of the webpage. 

How to use it:

1. Place both jQuery JavaScript library and the jQuery Scrollgress plugin at the end of the html document to improve the page load speed.

<script src="//"></script>
<script src="/path/to/scrollgress.js"></script> 

2. Call the function on the 'body' to generate a scroll progress indicator that monitors the scroll position for the whole page.


3. You can also call the function on a specific element to monitor the scroll position for an overflow element.


4. Customize the scroll progress indicator.


  // height in pixels
  height: '5px',

  // background color
  color: '#ff0000',


5. Fire a callback when you reach the bottom of the webpage (or a specific container).


  success: function() {}


Change log:


  • removed console log

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