Slim Top Scroll Position Indicator In jQuery
File Size: | 3.99 KB |
---|---|
Views Total: | 457 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

This is a slim top scroll position indicator written in JavaScript (jQuery), HTML, and CSS.
A Scroll Position Indicator is used to indicate the position of the page you're currently viewing in a scrollable element. This can be used so that you know where you are on a page in a long list of content. The concept is quite old and has been implemented in many interactive applications.
See Also:
How to use it:
1. Create an empty DIV to hold the scroll position indicator.
<div class="scroll-line"></div>
2. Load the latest jQuery library in the document.
<script src="/path/to/cdn/jquery.slim.min.js"></script>
3. Update the scroll position indicator as you scroll down/up the page.
$(window).scroll(function() { var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height(); var scrolled = (wintop/(docheight-winheight)) * 100; $('.scroll-line').css('width', (scrolled + '%')); });
4. Apply your own CSS styles to the scroll position indicator.
.scroll-line { height: 2px; margin-bottom: -2px; background: rgb(4, 0, 255); width: 0%; }
Changelog:
2022-11-18
- CSS Update
This awesome jQuery plugin is developed by gabrielandre-math. For more Advanced Usages, please check the demo page or visit the official website.