<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
</head>
<body>
<div id="app" class="container">
我是主页
<ul>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
<li>10000</li>
</ul>
</div>
<button id="btn">回到顶部</button>
<script type="text/javascript">
window.onload = function() {
var btn = document.getElementById('btn');
var timer = null;
var isTop = true;
//获取页面可视区高度
var clientHeight = document.documentElement.clientHeight;
//滚动条滚动时触发
window.onscroll = function() {
//显示回到顶部按钮
// var osTop = document.documentElement.scrollTop || document.body.scrollTop;
// if (osTop >= clientHeight) {
// btn.style.display = "block";
// } else {
// btn.style.display = "none";
// };
//回到顶部过程中用户滚动滚动条，停止定时器
if (!isTop) {
clearInterval(timer);
};
isTop = false;
};
btn.onclick = function() {
//设置定时器
timer = setInterval(function() {
//获取滚动条距离顶部高度
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
var ispeed = -5;
document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
//到达顶部，清除定时器
if (osTop == 0) {
clearInterval(timer);
};
isTop = true;
}, 100);
};
};
</script>
</body>
</html>
原创文章 112
获赞 173
访问量 4万+