网站经典功能之返回顶部

很酷的站长

发布于 2022-12-16 13:05:45

86300

代码可运行

文章被收录于专栏：站长的编程笔记站长的编程笔记

运行总次数：0

代码可运行

1. 背景介绍

当页面内容很多的时候，用户可能会一直往下滑动页面。但是当他想返回页面顶部进行其他操作时，他可能需要不断滚动鼠标滚轮，这就导致用户体验将很差。鉴于这种情况， “回到顶部”这一功能便出现了。

站长源码网

2. 返回顶部代码示例

<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>