js学习总结----浏览器滚动条卷去的高度scrolltop
1、之前我们学习的JS盒子模型中：client系列/offset系列/scrollWidth/scrollHeight都是“只读”的属性-> 只能通过属性获取值，不能通过属性修改元素的样式
2、scrollTop/scrollLeft:滚动条卷去的高度/宽度（这两个属性是唯一“可读写”的属性）
box.scrollTop = 0 // 直接回到容器的顶部
我们的scrollTop的值是存在边界值（最大和最小值），我们设置的值比最小值小或者比最大值大都没用，起到效果的依然是边界的值
[最小值是零]
box.scrollTop = -1000;// 直接回到了容器的顶部，没有超出
console.log(box.scrollTop) //0
[最大值 = 真实的高度-当前容器一屏幕的高度]
var maxTop = box.scrollHeight - box.clientHeight;
scrollTop最经典的应用就是回到顶部，下面代码如下：
1、之前我们学习的JS盒子模型中：client系列/offset系列/scrollWidth/scrollHeight都是“只读”的属性-> 只能通过属性获取值，不能通过属性修改元素的样式 2、scrollTop/scrollLeft:滚动条卷去的高度/宽度（这两个属性是唯一“可读写”的属性） box.scrollTop = 0 // 直接回到容器的顶部 我们的scrollTop的值是存在边界值（最大和最小值），我们设置的值比最小值小或者比最大值大都没用，起到效果的依然是边界的值 [最小值是零] box.scrollTop = -1000;// 直接回到了容器的顶部，没有超出 console.log(box.scrollTop) //0 [最大值 = 真实的高度-当前容器一屏幕的高度] var maxTop = box.scrollHeight - box.clientHeight; scrollTop最经典的应用就是回到顶部，下面代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding:0; margin:0; } html,body{ width:100%; height:1000%; background:#11c900; } a{ text-decoration: none; color:#000; } </style> </head> <body> <a href="javascript:" id="goLink">GO</a> //A标签本身是跳转页面的，把跳转的地址写在href这个属性中 /* 1）、不写值的话是刷新本页面 2）、写的如果是#target，是锚点定位，定位到当前页面Id为target这个位置 3）、“javascript:”这样写是取消A标签默认跳转的行为 */ <script> var goLink =document.getElementById("goLink"); /* 回到顶部： 总时间（duration）:500ms 频率（interval）：多长时间走一步 10ms 总距离(target): 当前的位置（当前的scrollTop）- 目标的位置(0) 步长(step)：每一次走得距离 (target/duration)*interval */ /* 这个代码是可以优化的: 开始GO按钮是不显示的，当滚动到一定的距离之后，才显示，反之隐藏 只要浏览器的滚动条在滚动，我们就需要判断GO显示还是隐藏 浏览器的滚动条滚动:拖动滚动条、鼠标滚轮、键盘上下键、pageDown/pageUp键、点击滚动条的空白区域或者箭头（自主操作的行为）...我们还可以通过js控制scrollTop的值来实现滚动条的滚动 */ window.onscroll = function computedDisplay(){//不管怎么操作的，只要滚动条动了就会触发这个行为 var curTop = document.documentElement.scrollTop || document.body.scrollTop; var curHeight = document.documentElement.clientHeight || document.body.clientHeight; if(curTop>=clientHeight){ goLink.style.display = "block" }else{ goLink.style.display = "none" } } goLink.onclick = function(){ this.style.display = "none";//并不会消失，因为我们滚动条往回走的时候 又会触发onscroll事件，又会进行显示 window.onscroll = null; var duration = 500,interval=10,target=document.documentElement.scrollTop || document.body.scrollTop; var step = (target/duration)*interval; var timer = window.setInterval(function(){ var curTop = document.documentElement.scrollTop || document.body.scrollTop; if(curTop===0){ window.clearInterval(timer); window.onscroll = computedDisplay; //当动画结束后把对应的方法重新绑定给window.onscroll return; } curTop-=step document.documentElement.scrollTop = curTop; document.body.scrollTop = curTop; },interval) // document.documentElement.scrollTop = 0; // document.body.scrollTop = 0; } </script> </body> </html>
