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

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

以下代码最好放到主题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>

引用原文地址