**
html
**
<div class="index">
<ul>
<li>
<img src="https://www.jq22.com/img/cs/500x500-1.png" alt="">
</li>
<li>
<img src="https://www.jq22.com/img/cs/500x500-1.png" alt="">
</li>
<li>
<img src="https://www.jq22.com/img/cs/500x500-1.png" alt="">
</li>
<li>
<img src="https://www.jq22.com/img/cs/500x500-1.png" alt="">
</li>
<li>
<img src="https://www.jq22.com/img/cs/500x300-1.png" alt="">
</li>
<li>
<img src="https://www.jq22.com/img/cs/500x300-1.png" alt="">
</li>
<li>
<img src="https://www.jq22.com/img/cs/500x300-1.png" alt="">
</li>
</ul>
<button id="btn" class="btnTop" style="display: none;"> 回到顶部 </button>
</div>
**
css
**
body,html {
width:100%;
background:rgb(247,246,246);
}
ul {
width:90%;
margin:100px auto;
background:rgb(2,47,248);
}
ul li {
width:100%;
margin:30px 0;
}
ul li img {
width:100%;
height:100%;
}
.btnTop {
position:fixed;
bottom:60px;
right:20px;
background:rgb(7,23,240);
font:700 14px/24px "";
color:#fff;
padding:2px 8px;
border:0px;
}
**
js(注释详细)
**
var tops = document.documentElement.scrollTop || document.body.scrollTop;
window.onload = function() {
var obtn = document.getElementById('btn'); //获取回到顶部按钮的ID
var clientHeight = document.documentElement.clientHeight; //获取可视区域的高度
var timer = null; //定义一个定时器
var isTop = true; //定义一个布尔值,用于判断是否到达顶部
window.onscroll = function() { //滚动条滚动事件
//获取滚动条的滚动高度
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
// if(osTop >= clientHeight){ //如果滚动高度大于可视区域高度,则显示回到顶部按钮
if (osTop >= 100) { //如果滚动高度大于可视区域高度,则显示回到顶部按钮
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;
//用于设置速度差,产生缓动的效果
var speed = Math.floor(-osTop / 18);
document.documentElement.scrollTop = document.body.scrollTop = osTop + speed;
isTop = true; //用于阻止滚动事件清除定时器
if (osTop == 0) {
clearInterval(timer);
}
}, 30);
}
}
**
效果(不会动图)
**