背景：虽然使用<a>标签的href属性可以实现跳转锚点的功能，但点击时会将URL地址栏进行修改。
在VUE中可以使用下面的方式避免修改掉URL。
- 准备一组a标签，绑定click事件
<ul>
<li><a @click="scrollToAnchor('id1')">评估记录</a></li>
<li><a @click="scrollToAnchor('id2')">CO&CO₂校准记录</a></li>
<li><a @click="scrollToAnchor('id3')">现场情况</a></li>
<li><a @click="scrollToAnchor('id4')">样品记录</a></li>
<li><a @click="scrollToAnchor('id5')">采样照片</a></li>
</ul>
2.实现scrollToAnchor方法
scrollToAnchor(anchorId) {
const element = document.getElementById(anchorId);
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
}
- 准备一组div标签，绑定ID属性，注意唯一
<div id='id1'>内容......</div>
<div id='id2'>内容......</div>
<div id='id3'>内容......</div>
<div id='id4'>内容......</div>
<div id='id5'>内容......</div>
- 以上就可实现在同一页面点击锚点跳转到指定的位置，同时不会修改URL。
