随意写了一个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.