Hi,
Please help me on creating Scroll Indicator with CSS and JavaScript?
When i scroll down or up the progress bar should display a indicator.
Hi makenzi.exc,
Refer below example.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> body { font-family: Arial; font-size: 10pt; } </style> </head> <body> <div style="position: fixed; top: 0; z-index: 1; width: 100%;"> <h2 style="text-align: center; height:50px"> Welcome to ASPSnippets<br /> <span id="lblScrollPercentage"></span> </h2> <div style="width: 100%; height: 8px; background: #ccc;"> <div id="dvBar" style=" height: 8px; background: #04AA6D; width: 0%;"></div> </div> </div> <div style="min-height: 1000px"></div> <script type="text/javascript"> window.onscroll = function () { var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; var scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; var scrollPercentage = (scrollTop / scrollHeight) * 100; document.getElementById("lblScrollPercentage").innerHTML = Math.round(scrollPercentage) + "%"; document.getElementById("dvBar").style.width = scrollPercentage + "%"; }; </script> </body> </html>
Demo
Screenshot
Downloads
Download Sample
© COPYRIGHT 2025 ASPSnippets.com ALL RIGHTS RESERVED.