JS 页面滚动，顶部显示加载进度
2018-07-05 本文已影响24人
圆梦人生
实现思路：（将已经滚动的高度 / 可滚动的高度）* 100
效果：
image.png
案例：
<!DOCTYPE HTML>
<html>
<header>
<meta charset="utf-8">
<!--
@author: SM
@desc: 滚动页面顶部显示滚动条，实现思路：（将已经滚动的高度 / 可滚动的高度）* 100
-->
<title>滚动进度条</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/*
滚动条距离
*/
.scrollCls {
position: fixed;
top: 0;
left: 0;
height: 3px;
background-color: #0A74DA;
}
</style>
</header>
<body>
<div class="scrollCls" id="scrollInfo"></div>
<div class="divInfo">
1这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
这是一个div，滚动查看效果 <br/>
</div>
<script>
//
window.onload = function(){
// 设置效果
function scrollDy(){
// 已经滚动距离
var sHeight = getScrollTop();
// 占比
var bl = Math.min((sHeight / scrollTotal) * 100, 100);
// 设置
scrollEl.style.width = bl + '%'
}
// 可滚动的总高度
var scrollTotal = getScrollHeight() - getWindowHeight();
//
var scrollEl = document.getElementById('scrollInfo')
// 监听滚动事件
window.onscroll = function(){
scrollDy();
}
// 初始化设置滚动
scrollDy();
}
// 已经滚动距离
function getScrollTop(){
var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
if(document.body){
bodyScrollTop = document.body.scrollTop;
}
if(document.documentElement){
documentScrollTop = document.documentElement.scrollTop;
}
scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
return scrollTop;
}
// 文档的总高度
function getScrollHeight(){
var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
if(document.body){
bodyScrollHeight = document.body.scrollHeight;
}
if(document.documentElement){
documentScrollHeight = document.documentElement.scrollHeight;
}
scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
return scrollHeight;
}
// 窗体高度
function getWindowHeight(){
var windowHeight = 0;
if(document.compatMode == "CSS1Compat"){
windowHeight = document.documentElement.clientHeight;
}else{
windowHeight = document.body.clientHeight;
}
return windowHeight;
}
</script>
</body>
</html>
