随意写了一个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,请注意相关的内容是否还可用!