网站经典功能之返回顶部

<style>
div.box {
height: 1000px;
background-color: aqua;
margin-bottom: 20px;
}
div#gotop {
width: 30px;
height: 30px;
cursor: pointer;
border-radius: 4px;
background-color: #4c4c4c;
position: fixed;
right: 30px;
bottom: 60px;
}
div#gotop img {
width: 100%;
height: 100%;
}
</style>
<div class="box"></div>
<div class="box"></div>
<div id="gotop">
<img src="https://www.itqaq.com/static/index/plugin/fixed/images/top.png">
</div>
<script>
window.onscroll = () => {
const res = document.body.scrollTop || document.documentElement.scrollTop
const gotop = document.getElementById('gotop')
gotop.style.display = res > 400 ? 'block' : 'none'
}
gotop.onclick = () => {
let res = document.body.scrollTop || document.documentElement.scrollTop
let t = res / 60
const index = setInterval(() => {
res -= t
if (res < 0) {
res = 0
clearInterval(index)
}
document.body.scrollTop = res
document.documentElement.scrollTop = res
}, 5);
}
</script>