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;
console.log(maxTop);
插曲:
<!--
a标签本身是跳转页面的,把跳转的地址写在href这个属性中
1)不写值的话是刷新本页面
2)写的如果是#target,是锚点定位,定位到当前页面ID为target这个位置
3)"javascript:;",这样写是取消a标签默认跳转的行为
-->
<a href="javascript:;" id="goLink">GO</a>
回到顶部实例
<script type="text/javascript">
var goLink = document.getElementById("goLink");
//->回到顶部:
//总时间(duration):500ms
//频率(interval):多长时间走一步 10ms
//总距离(target):当前的位置(当前的scrollTop值)-目标的位置(0)
//->步长(step):每一次走的距离 target/duration->每1ms走的距离*interval->每一次走的距离
goLink.onclick = function () {
//->当点击GO的时候,首先把每一步要走的步长计算出来
var duration = 500, interval = 10, target = document.documentElement.scrollTop || document.body.scrollTop;
var step = (target / duration) * interval;
//->计算完成步长后,让当前的页面每隔interval这么长的时间走一步:在上一次的scrollTop的基础上-步长
var timer = window.setInterval(function () {
var curTop = document.documentElement.scrollTop || document.body.scrollTop;
if (curTop === 0) {//->已经到头了
window.clearInterval(timer);
return;
}
curTop -= step;
document.documentElement.scrollTop = curTop;
document.body.scrollTop = curTop;
}, interval);
}
</script>
<script type="text/javascript">
var goLink = document.getElementById("goLink");
//->开始GO按钮是不显示的,只有当浏览器卷去的高度超过一屏幕的高度的时候在显示,反之隐藏->只要浏览器的滚动条在滚动,我们就需要判断GO显示还是隐藏
//->浏览器的滚动条滚动:拖动滚动条、数遍滚轮、键盘上下键或者pageDown/pageUp键、点击滚动条的空白处或者箭头(自主操作的行为)...我们还可以通过JS控制scrollTop的值实现滚动条的滚动
//->window.onscroll不管怎么操作,只要滚动条动了就会触发这个行为
window.onscroll = computedDisplay;
function computedDisplay() {
var curTop = document.documentElement.scrollTop || document.body.scrollTop;
var curHeight = document.documentElement.clientHeight || document.body.clientHeight;
goLink.style.display = curTop > curHeight ? "block" : "none";
}
goLink.onclick = function () {
//->当点击的时候让当前的GO消失
this.style.display = "none";
//->光这样还不行:我们往回走的时候又把window.onscroll行为触发了,让GO又显示了->我们需要在点击后,把window.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);
}
</script>