美文网首页
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