Top Scroll Progress Indicator Plugin With jQuery - Scrollgress

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

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="//code.jquery.com/jquery.min.js"></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.

$('body').scrollgress();

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

$('#container').scrollgress();

4. Customize the scroll progress indicator.

$('body').scrollgress({

  // 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).

$('body').scrollgress({

  success: function() {}

});

Change log:

2018-02-28

  • 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.