前端锚点简单介绍

在vue中，使用简单的锚点定位只需要三步：

// 1: 在导航栏位置：
<a href="javascript:void(0)" @click="goAnchor('basicInformation')">
    <el-menu-item index="1">
        <span slot="title">基础信息</span>
    </el-menu-item>
</a>

// 2:在需要跳转到的地方：
<el-row id="basicInformation">
    正文内容正文内容正文内容
</el-row>

 

使用了element的导航菜单，在外面加一个a标签，

href="javascript:void(0)"

这个意思是点击的时候不跳转到其他页面，停留在本页，这个是很有必要的。

 

@click="goAnchor('basicInformation')"

这是一个   goAnchor   方法，我们在下面介绍，这个方法需要传一个参数，这个参数就是需要跳转的div的   id

 

在vue的 methods 里面定义 goAnchor 方法。我看其他博主介绍说有两种方法，我这里用了代码少的那一个。

// 3: goAnchor方法
goAnchor(id) {
    const anchor = document.getElementById(id)
    anchor.scrollIntoView()
},

 

不过，这只是简单的锚点定位，有很大的缺陷：在路由模式为hash的模式下，会出现问题，所以还有另外一种稍微复杂一点的方法，可以实现锚点定位，可以参考这篇博客：

https://blog.csdn.net/u010259906/article/details/120684343?spm=1001.2101.3001.6650.6&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-6.pc_relevant_paycolumn_v3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-6.pc_relevant_paycolumn_v3&utm_relevant_index=11

 

本博客还参考了这篇博客：

https://blog.csdn.net/m0_51358164/article/details/119983708