js回到顶部
2024-08-23 15:32:41
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>回到顶部</title>
<style>
* { padding: 0; margin: 0; }
#box {width: 100%;height: 2400px;margin: auto;border: 1px solid red;box-sizing: border-box;}
#top {width: 60px;height: 50px;line-height: 50px;background-color: orange;color: #fff;font-size: 12px;text-align: center;position: fixed;
right: 20px;bottom: 20px;text-decoration: none;display: none;
}
</style>
</head>
<body>
<div id="box"></div>
<a href="javascript:;" id="top">返回顶部</a>
</body>
<script>
window.onload = function () {
var oTop = document.getElementById('top')
// 获取页面可视区的高度
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) {
oTop.style.display = 'block'
} else {
oTop.style.display = 'none'
}
if (!isTop) {
clearInterval(timer)
}
isTop = false
} oTop.onclick = function () {
timer = setInterval(function () {
// 获取滚动条距离顶部的高度
var osTop = document.documentElement.scrollTop || document.body.scrollTop
var ispeed = Math.floor(-osTop / 5)
document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed
isTop = true
if (osTop === 0) {
clearInterval(timer)
}
}, 30)
}
}
</script>
</html>
最新文章
- ORA-01502: index &#39;INDEX_NAME&#39; or partition of such index is in unusable state
- webpack配置备份
- spring mybatis memcached
- 关于python3.X 报";import urllib.request ImportError: No module named request";错误,解决办法
- iOS 注意事项
- windows 7 安装 scrapy
- zw版【转发&#183;台湾nvp系列Delphi例程】HALCON RegionToBin2
- linq中查询列表的使用及iqueryable和list集合之间的转换
- Lua学习笔记(五):面向对象的实现
- HDU 3652(数位DP)
- Django中的可复用模板
- HTTP/2部署使用
- ccflow表机构与运行机制(二次开发必看)
- 关于SQL的over partition by 开窗语句在分页和统计中的使用总
- Java 获取表格中某一个单元格的值
- exp自动备份在bat中不执行
- POJ3580 SuperMemo
- Spring Boot 揭秘
- MySQL查询表的所有列名,用逗号拼接
- output.php