demo代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>回到顶部</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
width: 100%;
margin: 0 auto;
}
.top {
width: 100%;
height: 200px;
background: red;
}
.content {
width: 100%;
height: 1000px;
background: blue;
}
.back {
width: 50px;
height: 50px;
border: 1px solid #000;
background: pink;
font-size: 18px;
text-align: center;
position: fixed;
bottom: 50px;
right: 80px;
display: none;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<div class="container">
<div class="top">
顶部内容
</div>
<div class="content">内容部分</div>
<div class="back">回到顶部</div>
</div>
</div>
<script type="text/javascript">
var boxTop = document.getElementsByClassName("top")[0];
var topHeight = boxTop.offsetHeight;
var boxcontainer = document.getElementsByClassName("container")[0];
console.log(boxcontainer.scrollTop);
var timer = null;
var boxBack = document.getElementsByClassName("back")[0];
var leader = 0;
window.onscroll = function(){
if(document.documentElement.scrollTop >= topHeight){
boxBack.style.display = "block";
}else{
boxBack.style.display = "none";
};
leader = document.documentElement.scrollTop;//每滑动一次获取被卷去的距离
};
// 如果不需要缓慢滚动到顶部的话，直接使用scrollTo(0,0)
boxBack.onclick = function(){
clearInterval(timer);
timer = setInterval(function(){
var target = 0;
var speed = (target - leader)/10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
leader = leader + speed;
window.scrollTo(0,leader); //滚动到指定坐标
if(leader === 0){
clearInterval(timer);
};
},30);
};
</script>
</body>
</html>因篇幅问题不能全部显示，请点此查看更多更全内容