浏览器滚动条卷去的高度(scrollTop)
JS盒子模型中: client系列/ offset系列/ scrollWidth/ crollHeight, 都是只读属性, 不能通过属性修改元素的样式
scrollTop/ scrollLeft: 滚动条卷去的高度/ 宽度, 是可读写属性.
直接回到顶部
box.scrollTop = 0;
scrollTop的值存在边界值(最大和最小值), 修改的值不能超过边界
最小值
box.scrollTop = -1000;
console.log(box.scrollTop);
-> 0
最大值
var maxTop = box.scrollHeight - box.clientHeight;
box.scrollTop = 2500;
console.log(box.scrollTop === maxTop);
-> true
回到顶部按钮
A标签本身是跳转页面的, 把跳转的地址写在href这个属性中
- 不写值得话是刷新本页面
- 写的如果是#target, 是瞄点定位, 定位到当前页面ID为target这个位置
- "javascript:;", 这样写是取消A标签默认跳转的行为
<!--
* @Author: lemon
* @Date: 2020-09-10 18:39:32
* @LastEditTime: 2020-09-13 18:08:58
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: React前端准备JS基础1.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: "5FAE8F6F96C59ED1", Helvetica, sans-serif;
font-size: 14px;
-webkit-user-select: none;
}
html,
body {
100%;
height: 500%;
background-color: lightgoldenrodyellow;
background: -webkit-radial-gradient(
50px 30px,
circle,
#fff,
#64d1dd,
#4947ba
);
background: radial-gradient(50px 30px, circle, #fff, #64d1dd, #4947ba);
}
a {
text-decoration: none;
color: #000;
}
a:hover a:active a:target a:visited {
text-decoration: none;
color: #000;
}
#goLink {
visibility: hidden;
position: fixed;
bottom: 150px;
right: 50px;
50px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: red;
opacity: 0.5;
filter: alpha(opacity=50);
border-radius: 50%;
}
#goLink:hover {
opacity: 1;
filter: alpha(opacity=100);
}
#target {
margin: 1000px auto;
height: 50px;
background: red;
}
</style>
</head>
<body>
<div id="box">
要得到你必须要付出，要付出你还要学会坚持，如果你真的觉得很难，那你就放弃，但是你放弃了就不要抱怨，我觉得人生就是这样，世界是公平的，每个人都是通过自己的努力，去决定自己生活的样子
要得到你必须要付出，要付出你还要学会坚持，如果你真的觉得很难，那你就放弃，但是你放弃了就不要抱怨，我觉得人生就是这样，世界是公平的，每个人都是通过自己的努力，去决定自己生活的样子
要得到你必须要付出，要付出你还要学会坚持，如果你真的觉得很难，那你就放弃，但是你放弃了就不要抱怨，我觉得人生就是这样，世界是公平的，每个人都是通过自己的努力，去决定自己生活的样子
要得到你必须要付出，要付出你还要学会坚持，如果你真的觉得很难，那你就放弃，但是你放弃了就不要抱怨，我觉得人生就是这样，世界是公平的，每个人都是通过自己的努力，去决定自己生活的样子
要得到你必须要付出，要付出你还要学会坚持，如果你真的觉得很难，那你就放弃，但是你放弃了就不要抱怨，我觉得人生就是这样，世界是公平的，每个人都是通过自己的努力，去决定自己生活的样子
要得到你必须要付出，要付出你还要学会坚持，如果你真的觉得很难，那你就放弃，但是你放弃了就不要抱怨，我觉得人生就是这样，世界是公平的，每个人都是通过自己的努力，去决定自己生活的样子
要得到你必须要付出，要付出你还要学会坚持，如果你真的觉得很难，那你就放弃，但是你放弃了就不要抱怨，我觉得人生就是这样，世界是公平的，每个人都是通过自己的努力，去决定自己生活的样子
要得到你必须要付出，要付出你还要学会坚持，如果你真的觉得很难，那你就放弃，但是你放弃了就不要抱怨，我觉得人生就是这样，世界是公平的，每个人都是通过自己的努力，去决定自己生活的样子
要得到你必须要付出，要付出你还要学会坚持，如果你真的觉得很难，那你就放弃，但是你放弃了就不要抱怨，我觉得人生就是这样，世界是公平的，每个人都是通过自己的努力，去决定自己生活的样子
要得到你必须要付出，要付出你还要学会坚持，如果你真的觉得很难，那你就放弃，但是你放弃了就不要抱怨，我觉得人生就是这样，世界是公平的，每个人都是通过自己的努力，去决定自己生活的样子
</div>
<a href="javascript:;" id="goLink">Go</a>
<div id="target"></div>
</body>
<script type="text/javascript">
var goLink = document.getElementById("goLink");
// 开始GO按钮是不显示的， 只有当浏览器卷去的高度超过一屏， goLink按钮才会显示， 反之隐藏 ->只要浏览器的滚动条在滚动， 我们就需要判断goLink显示还是隐藏
// 浏览器的滚动条滚动： 拖动滚动条， 鼠标滚动， 键盘上下键或者pageDown/pageUp键， 点击滚动条的空白处或者箭头（自主操作的行为）。。。我们还可以通过JS控制scrollTop的值来实现滚动条的滚动
function scrollDisplay() {
// window.onscroll不管怎么操作， 只要滚动条懂了就会出发这个行为
var curTop =
document.documentElement.scrollTop || document.body.scrollTop;
var curHeight =
document.documentElement.clientHeight || document.body.clientHeight;
curTop > curHeight
? (goLink.style.visibility = "visible")
: (goLink.style.visibility = "hidden");
}
window.onscroll = scrollDisplay;
// 缓慢回到顶部
goLink.onclick = function () {
window.onscroll = null;
goLink.style.visibility = "hidden";
var duration = 500; // 总时间500ms
var interval = 10; // 频率10mx
var target =
document.documentElement.scrollTop || document.body.scrollTop; // 总距离：当前的位置的（当前的scrollTop值） - 目标位置（0）
var step = (target / duration) * interval; // 步长， 每一次走的距离 target/duration > 每1ms走的距离 * interval > 每一次走的距离
// 计算完成步长后， 让当前的页面每隔interval这么长的时间走一步： 在原来的scrollTop的基础上-步长
var timer = window.setInterval(function () {
var curTop =
document.documentElement.scrollTop || document.body.scrollTop;
curTop -= step;
if (curTop <= 0) {
// 走到头了
console.log("走到头了");
window.clearInterval(timer);
window.onscroll = scrollDisplay;
return;
}
document.documentElement.scrollTop = curTop;
document.body.scrollTop = curTop;
}, interval);
};
</script>
</html>