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.
Table of Contents
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
Thanks for make jQuery plugin is developed by shahabes For more Helpfull for users, please check the demo page or visit the official website.
