添加网页动态滚动进度条|滚动指示器

技术教程 · 2026-06-17 · 1 分钟阅读

看到别人的博客网页顶部有一个页面翻动的进度条，页面滚动到哪里进度条也相应变动长短。自己也加了一个。

以下代码最好放到主head里

<!--动态滚动进度条-->

<div class="scroll-line" style="z-index: 999;position: fixed;height: 3px;top: 0px;background-color: #6B999B;width: 0%;"></div>

<script type="text/javascript">

    $(window).scroll(function() {

        var winTop = $(window).scrollTop(), //滚动条的位置

                docHeight = $(document).height(),   //文档高度

                winHeight = $(window).height(); //窗口高度

 

        var scrolled = (winTop / (docHeight - winHeight))*100;

 

        $('.scroll-line').css('width', (scrolled + '%'));

    });

</script>

引用原文地址：https://blog.csdn.net/hbtj_1216/article/details/52555284