<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 回到顶部效果</title>
<style>
.box{
width: 1000px;
margin: 0 auto;
}
.btn{
position: fixed;
right: 30px;
bottom: 30px;
width: 40px;
height: 40px;
background-image: url('top_bg.png');
background-position: 0 0;
background-repeat: no-repeat;
display: none;
}
.btn:hover{
background-position: 0 -40px;
}
</style>
</head>
<body>
<div class="box">
<img src="demo.png" alt="">
</div>
<a href="javascript:;" class="btn" id="btn"></a>
<script>
window.onload = function(){
var obtn = document.getElementById('btn');
var clientHeight = document.documentElement.clientHeight;
console.log(clientHeight);
var timer = null;
var isTop = true;
window.onscroll = function(){
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log('gundongz');
if(osTop >= clientHeight){
obtn.style.display = 'block';
}else{
obtn.style.display = 'none';
}
if(!isTop){
clearInterval(timer);
}
isTop = false;
}
obtn.onclick = function(){
timer = setInterval(function(){
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log(osTop);
var ispeed = Math.floor(-osTop / 10);
document.documentElement.scrollTop = document.body.scrollTop = osTop+ispeed;
isTop = true;
if(osTop == 0){
clearInterval(timer);
}
},30)
}
}
</script>
</body>
</html>