一、简易版
1、页面定义锚点位置
@click="goAnchor('#vital1')" 为锚点事件，点击左侧导航，右侧滚动到对应的导航锚点位置。
设置锚点时，需添加id（id="vital1"）
<!--侧边栏-->
<ul class="leftSidebar">
<li class="shapeHand" @click="goAnchor('#vital1')">
<p class="Sidebar_p">赛季</p>
</li>
</ul>
<!--设置锚点-->
<div class="anchorSubject" id="vital1">
<p class="anchor_text">赛季</p>
<i class="anchor_i"></i>
</div>
<!--锚点下显示的内容-->
<div>展示内容的区域......</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
2、定义执行的方法
methods:{
//锚点跳转
goAnchor(selector) {/*参数selector是id选择器（#anchor14）*/
document.querySelector(selector).scrollIntoView({
behavior: "smooth"
});
},
}
1
2
3
4
5
6
7
8