老师我设置res为滚动条变量，定义的全局变量，在点击按钮返回顶部没有用，注释里的有用
来源：2-14 BOM特效开发（1）
我代码么问题
2021-10-23 15:13:56
<!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>
body {
height: 5000px;
background-image: linear-gradient(to bottom, green, red, blue);
}
.btn {
width: 100px;
height: 100px;
background-color: #ccc;
position: fixed;
bottom: 100px;
right: 100px;
display: none;
}
</style>
</head>
<body>
<input type="button" value="返回顶部" class="btn">
<script>
var btn = document.querySelector('.btn');
var time; //清除定时器
var res; //获取滚动条滑动多少
window.onscroll = function () {
res = document.documentElement.scrollTop || document.body.scrollTop;
console.log(res);
res >= 2000 ? btn.style.display = 'block' : btn.style.display = 'none';
}
btn.addEventListener('click', function () {
time = setInterval(() => {
res <= 0 ? clearInterval(time) : res -= 120;
// document.documentElement.scrollTop <= 0 ? clearInterval(time) : document.documentElement
// .scrollTop -= 120;
}, 20);
});
</script>
</body>
</html>
1回答
-
好帮手慕星星
2021-10-23
同学你好，res变量接收的是数字，数字改变不会倒着影响document.documentElement.scrollTop的值，除非再次赋值。所以页面不会滚动。就像下面这个例子：
将a赋值给b后，改变b值，a值并不会变
注释中的代码是直接给document.documentElement.scrollTop赋值的，所以能滚动
自己再理解下，祝学习愉快！
0
相似问题