大概就是要实现这种锚点效果图,代码如下
在项目中的使用
在导航栏上绑定这个事件,并传至,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