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











