随意写了一个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>调用。
本站部分文章搜集整理于互联网或者网友提供,如有侵权请联系站长
如若转载,请注明出处:https://www.htmlbk.com/web/2271.html
温馨提示:该文档最后一次修改时间为2022-11-24 09:28:34,请注意相关的内容是否还可用!