回到顶部实例scrollTop

最新推荐文章于 2024-09-02 09:20:31 发布

原创最新推荐文章于 2024-09-02 09:20:31 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#scrollTopscrollLeft #回到顶部 #计时器 #盒子模型 #a标签href跳转

JavaScript 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何利用scrollTop属性实现页面回到顶部的功能。通过设置box.scrollTop为0，可以将滚动条定位到容器顶部。需要注意scrollTop的值存在边界，超出边界设置无效。此外，还提及了与回到顶部相关的计时器和a标签href跳转应用。

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>