Top Scroll Progress Indicator Plugin With jQuery - Scrollgress
File Size: | 215 KB |
---|---|
Views Total: | 2375 |
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.