在这里插入图片描述
大概就是要实现这种锚点效果图,代码如下
在项目中的使用
在导航栏上绑定这个事件,并传至,Key是唯一标识
在这里插入图片描述

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是右侧要滚动的元素,效果如下:
在这里插入图片描述
这样写完后,就基本上可以实现上面那张动图的效果啦;

在使用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

Logo

前往低代码交流专区

更多推荐