美文网首页
vue 锚点跳到指定位置不生效 scrollTop

vue 锚点跳到指定位置不生效 scrollTop

作者: 阳紫烨 | 来源:发表于2022-10-27 16:05 被阅读0次

    产品加了个需求,页面锚点跳到对应的位置:

    要是jquery写的 id="hh", <a href="#hh"></a>就完事了;但这个是vue写的

    document.querySelector('.page').scrollTop = 500

    不滚动,

    this.$nextTick(() => {

        document.querySelector('.page').scrollTop = 500

    });

    还是不滚动。感觉阴沟里翻船了!

    解决办法,首先要看滚动是在那个元素上发生的

    右击元素,选择存储为全局变量

    控制台就会出现如下

    temp2.scrollTop = 0 ,无论页面怎么滚动,值都为0,说明滚动不在这个元素上发生,所以 document.querySelector('.page').scrollTop = 500不生效

    后面找了好几个都,都是零

    document.body.scrollTop也不行

    高光时刻来了

    document.documentElement.scrollTop  的值终于不为零了

    document.documentElement.scrollTop = 目标offsetTop  搞定

    相关文章

      网友评论

          本文标题:vue 锚点跳到指定位置不生效 scrollTop

          本文链接:https://www.haomeiwen.com/subject/tllftdtx.html