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;  
   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>