VUE实现类似a标签跳转锚点位置的功能

背景：虽然使用<a>标签的href属性可以实现跳转锚点的功能，但点击时会将URL地址栏进行修改。
在VUE中可以使用下面的方式避免修改掉URL。

  1. 准备一组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' });
    }
  }
  1. 准备一组div标签，绑定ID属性，注意唯一
<div id='id1'>内容......</div>
<div id='id2'>内容......</div>
<div id='id3'>内容......</div>
<div id='id4'>内容......</div>
<div id='id5'>内容......</div>
  1. 以上就可实现在同一页面点击锚点跳转到指定的位置，同时不会修改URL。
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容