Page Scroll Progress Indicator With jQuery Script

Other
Demo    Download
Slim Scroll Progress Indicator With jQuery
File Size: 11.42 KB
Views Total: 317 views
Last Update:February 27, 2021
Publish Date: February 27, 2021
Official Website: Go to website
License: MIT
Plugin Author: shahabes

A nice scroll indicator with jQuery on web page. indicate scroll view when user read & scroll down on page. helpful for long article on web page or read blog other sites can be used.

How to use:

Add the jQuery library on the page :

<script src="/path/to/cdn/jquery.slim.min.js"></script>

Create the HTML for the scroll progress bar :

<div class="indicator-wrapper">
  <div class="indicator"></div>
</div>

Add Script for page scroll event, calculate the percentage of page scroll :

$(document).ready(() => {
  //add a listener for scroll
  $(window).scroll(() => {

    //get article's height
    let docHeight = $(".article").height();

    //get window height
    let winHeight = $(window).height();

    //calculate the view port
    let viewport = docHeight - winHeight;

    //get current scroll position
    let scrollPos = $(window).scrollTop();

    //get current scroll percent
    let scrollPercent = (scrollPos / viewport) * 100;

    //add the percent to the top progress bar
    $(".indicator").css("width", scrollPercent + "%");
    
  });
});

Apply CSS styles to the scroll progress bar :

.indicator-wrapper {
  position: fixed;
  top: 0;
  width: 100%;
  height: 5px;
}

.indicator {
  width: 0;
  height: 100%;
  background-color: #4F46E5;
  box-shadow: 0 2px 5px #4F46E5;
}

Done

List Of Version :

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.