[JavaScript知识库]vue项目使用锚点

大概就是要实现这种锚点效果图，代码如下

methods:{
   // 点击左侧菜单栏事件
    changenavigationBar(key) {
      // console.log(key);
      // debugger
      // 获取点击的按钮对应页面的id
      var PageId = document.querySelector("#right" + key);
      // 打印出对应页面与窗口的距离
      // console.log(PageId.offsetTop)

      // 使用平滑属性，滑动到上方获取的距离
      // 下方我只设置了top，当然 你也可以加上 left 让他横向滑动
      // widow 根据浏览器滚动条，如果你是要在某个盒子里面产生滑动，记得修改
      window.scrollTo({
        top: PageId.offsetTop,
        behavior: "smooth",
      });
    },
}

解释一下这个var PageId = document.querySelector("#right" + key);



最后这个两个div是右侧要滚动的元素，效果如下：

这样写完后，就基本上可以实现上面那张动图的效果啦；

在导航栏上绑定这个事件，并传至，Key是唯一标识

在使用element导航栏做锚点的时候可能会报以下两个错误，可以看一下，下面这两个链接
第一个https://blog.csdn.net/Cool_so_cool/article/details/118695199?spm=1001.2014.3001.5501
第二个https://blog.csdn.net/Cool_so_cool/article/details/118695085?spm=1001.2014.3001.5501