|
要求：在页面右下角有一个div标签，点击div标签浏览器右边滚动条回到顶部
思路：通过设置 浏览器卷去高度 判断滚动条是否到达顶部。
步骤：
1、对浏览器页面进行简单布局
<style>
* {margin: 0; padding: 0;}
body {height: 1000px; background: #000;}
div {width: 70px; height: 50px; background-color: skyblue; position: fixed; bottom: 50px;
right: 50px;}
</style>
<body>
<div id="btn">回到顶部</div>
</body>
2、对 div 绑定点击事件
btn.onclick = function () {
}
3、通过设置定时器不断使浏览器卷去高度减少，并判断当卷去高度为 0 时 达到顶部，停止定时器。
btn.onclick = function () { // 对 div 绑定的点击事件
timer = setInterval(function () { // 设置定时器
document.documentElement.scrollTop -= 20 // 使高度每次减少20px
if (document.documentElement.scrollTop <= 0) {
clearInterval(timer) // 关闭定时器
}
}, 50) // 50毫秒执行一次
}
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 1000px;
background: #000;
}
div {
width: 70px;
height: 50px;
background-color: skyblue;
position: fixed;
bottom: 50px;
right: 50px;
}
</style>
</head>
<body>
<div id="btn">回到顶部</div>
<script>
var timer = 0
btn.onclick = function () {
timer = setInterval(function () {
document.documentElement.scrollTop -= 20
if (document.documentElement.scrollTop <= 0) {
clearInterval(timer)
}
}, 50)
}
</script>
</body>
</html>
|