vue实现锚点

vue学习, 遇到的问题集合 本文总阅读量次

重写旧代码的时候，遇到需要写锚点功能，但是原本的href和id搭配的实现方法就不太合适了

问题描述

  • 做目录的时候，如果使用常规锚点（a href+ id）则会出现路由的问题，不能达到期望效果
  • 比如：点击href设为#nav2后会直接跳到当前根路径下的href位置http://localhost:1644/#nav2，

解决方法

  • 获取dom元素，通过使用**Element.scrollIntoView()** 让当前元素滚动到浏览器窗口的可视区域内。即，通过vue的点击事件，点击后匹配到对应元素进行滚动即可。

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<a @click="anchorJump('#nav2')">
    <h5>
        版本区别
        <i class="icon icon-nav-triangle"></i>
    </h5>
</a>

// ...

anchorJump(anchorId) {
    const anchorEle = document.querySelector(anchorId);
    if ( anchorEle ){
        anchorEle.scrollIntoView(true);
    }
}
vue学习, 遇到的问题集合