网站经典功能之返回顶部
2024-09-28
11
1. 背景介绍
当页面内容很多的时候,用户可能会一直往下滑动页面。但是当他想返回页面顶部进行其他操作时,他可能需要不断滚动鼠标滚轮,这就导致用户体验将很差。鉴于这种情况, “回到顶部”这一功能便出现了。
2. 返回顶部代码示例
更新于:16天前<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>
赞一波!
相关文章
- 系统架构7个非功能性需求
- Javascript事件与功能说明大全
- 玩游戏学习编程的网站
- homebrew 的 tap 功能详解
- 电脑壁纸网站
- F#可以开发网站吗?
- 系统的讲解网站的优化
- 如何建设一个个人网站(个人博客)
- .NET网站性能优化方案
- JavaScript 常用自定义功能函数
- PHP 常用功能函数
- 个人网站或博客如何配置免费的域名邮箱
- apache 的虚拟主机功能
- 仿站小工具和小飞兔(扒取网站页面)
- 个人网站如何配置https
- 网站配色生成器推荐
- C#的网站通过Windows性能计数器监测服务器的性能
- 域名备案需要先把网站做完发布吗?
- C#如何实现截屏功能
- 你希望早点知道哪些 Python 功能?
文章评论
评论问答