Vue项目实现页面滑动到指定选择器位置

最新推荐文章于 2024-10-12 15:30:21 发布

LiuzhipenG94

最新推荐文章于 2024-10-12 15:30:21 发布

阅读量1.4k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/LiuzhipenG94/article/details/123704098

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在Vue项目中遇到锚链接功能实现的挑战，由于a标签的限制，常规方法无法奏效。文章分享了两种不同的锚点跳转方案，其中第一种在某些浏览器中未生效，而第二种方案经过测试，成功兼容了IE9到IE11，以及Google和火狐浏览器。提供的代码片段展示了如何使用`scrollIntoView`方法实现平滑滚动效果，确保了良好的浏览器兼容性。

摘要由CSDN通过智能技术生成

项目中遇到要做锚链接的功能，但是项目数vue开发的，由于对a标签的不友好所以不能用老办法做锚点跳转，于是找了很久首先找到的方案作者有效但是我的IE，google，火狐都无效，最终找到了一个不仅代码少而且兼容IE9,IE10,IE11,Google,火狐的方案，下面我两种方案都写上，读者自己权衡。

方案1：（亲测试的无效）

    // 这里的index就是第几个 class DOM
    jump(index) {
      const jump = document.querySelectorAll(".class");
      // 获取需要滚动的距离
      const total = jump[index].offsetTop;
      // Chrome
      document.body.scrollTop = total;
      document.documentElement.scrollTop = total;
      // Firefox
      document.documentElement.scrollTop = total;
      // Safari
      window.pageYOffset = total;
      console.log(index, "锚点", total);
      window.scrollTo(100, 8000);
    }

方案2：（亲测试有效）兼容IE9、IE10、IE11、Google、火狐

    // 只要调用这个方法，传入ID选择器即可例如：goAnchor('#artilce1')、goAnchor('#artilce2')
    goAnchor(selector) {
      document.querySelector(selector).scrollIntoView({behavior: "smooth", block: "center", inline: "nearest"});
    }