Slim Top Scroll Position Indicator In jQuery

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:

• 10 Best Reading Progress Indicators In JavaScript & CSS

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.