JavaScript: Create Scroll (Progress) Indicator when scrolling

makenzi....

SOLVED CLOSED ACTIVE ANSWERED
User: makenzi.exc
Posted: on Mar 15, 2025 09:14 AM
Forum: JavaScript
Replies: 1
Views: 32

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.

Download FREE API for Word, Excel and PDF in ASP.Net

Mudassar

0 1

Reply
User: Mudassar
Replied: on Mar 15, 2025 09:15 AM
Report

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

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Description

Description is required.

JavaScript: Create Scroll (Progress) Indicator when scrolling

Company

Explore

Follow us

Contact Us