浏览器滚动条卷去的高度(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: "\5FAE\8F6F\96C5\9ED1", Helvetica, sans-serif;
font-size: 14px;
-webkit-user-select: none;
}
html,
body {
width: 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;
width: 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>