随意写了一个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>调用。

THE END

本站部分文章搜集整理于互联网或者网友提供,如有侵权请联系站长

如若转载,请注明出处:https://htmlbk.com/web/2271.html

温馨提示:该文档最后一次修改时间为2022-11-24 09:28:34,请注意相关的内容是否还可用!