效果如本站右下角效果，根据下拉窗口对应的整个网站敞口的位置来实现进度的展示，主要代码如下，首先是需要定一个展示的位置，我是直接连在返回顶部的按钮附近，有些站点在固定的一个地方展示一个圆形的进度，或者是网站顶部或者底部的一个很长的进度条，这些在效果都和这个差不多，主要还是js计算那块。
<a href="javascript:" class="border-color row-bg progress-browse"><span id="progress">0</span>%</a>js代码如下，主要是要监听网站滚动事件
$(window).scroll(function(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
var progressRate = parseInt(scrollTop / (scrollHeight - clientHeight) * 100);
$("#progress").text(progressRate);
});实际的公式就是
滚动的比例 = 滚动条下拉的距离/(网站整体高度-当前视窗的高度 * 100%)
网站整体高度就是当前视窗的高度+下拉到网站底部的高度，也就是整站高度。
最后效果直接看本站即可。
- 标签
- js
内容版权声明：除非注明，否则皆为本站原创文章。
转载注明出处：https://sulao.cn/post/1073
评论列表