jQuery实现显示页面滚动进度功能

随意写了一个jQuery小工具，DEMO在这页上就有啦~

首先是显示在顶部的进度条，使用以下的CSS：

.scroll-line {
  height: 2px;
  margin-top: -1em;
  background: gray;
  width: 0%;
}

以及以下的JS：

$(window).scroll(function(){
var wintop = $(window).scrollTop(), 
    docheight = $(document).height(), 
    winheight = $(window).height();
        var scrolled = (wintop/(docheight-winheight))*100;
 
        $('.scroll-line').css('width', (scrolled + '%'));
});

通过<div class="scroll-line"></div>调用即可。

然后是右下角的Go to Top按键上的数字，可以沿用上面的JS，稍作修改：

$(window).scroll(function(){
var wintop = $(window).scrollTop(), docheight = 
 
    $(document).height(), winheight = $(window).height();
            var scrolled = (wintop/(docheight-winheight))*100;
 
    $('.goTOP').each(function () {
        var gotop = scrolled.toFixed(0)
        $(this).html(gotop + '%');
    });
});

然后通过<span class="goTOP"></span>调用。

Q.E.D.

Comments