回到顶部

最新推荐文章于 2022-11-02 15:03:54 发布

原创最新推荐文章于 2022-11-02 15:03:54 发布 · 252 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript 专栏收录该内容

23 篇文章

订阅专栏

scrolltop onscroll事件，

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>回到顶部</title>
<link rel="stylesheet" type="text/css" href="css/simple-cube.min.css">

</head>
<style type="text/css">
.wrap{
width: 1190px;
margin: 0 auto;
}
#btn{
display: block;
width: 40px;
height: 40px;
background: url(imgs/top_bg.png) no-repeat left top;
position: fixed;
bottom: 30px;
left: 50%;
margin-left: 610px;
display: none;
}
#btn:hover{
background: url(imgs/top_bg.png) no-repeat left -40px;
}
</style>
<body>
<div class="wrap">
<img src="imgs/tb_bg.jpg">
</div>
<a href="javascript:" id="btn"></a>

<script type="text/javascript">
window.onload = function(){
var obtn = document.getElementById("btn");
var time = null;
var isTop = true;
// clientHeight可以取到视口的高度
var clientHeight = document.documentElement.clientHeight;
// 按钮在滚完一个视口高度是才显示，需要滚动监听事件，在滚动条距离上端的距离大于或者等于一个视口高度时，按钮显示，否则隐藏
window.onscroll = function(){
// document.documentElement.scrollTop || document.body.scrollTop可取到滚动条到顶端的距离
var osTop = document.documentElement.scrollTop || document.body.scrollTop;

if (osTop >= clientHeight) {
obtn.style.display = "block";
}else{
obtn.style.display = "none";
}
if (!isTop) {
clearInterval(time);
}
isTop = false;
}
// 每次向上滚动的距离都会滚动条距顶部距离的六分之一，这样就有一个加速度，
obtn.onclick = function(){
time = setInterval(function(){
var osTop = document.documentElement.scrollTop || document.body.scrollTop;

var speed = -osTop / 6;
document.documentElement.scrollTop = document.body.scrollTop = osTop + speed;
isTop = true;
if (osTop == 0) {
clearInterval(time);
}
},30)

}
}
</script>

</body>
</html>