2024年03月22日 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>调用。
本文链接：http://so.lmcjl.com/news/172/