HTML 锚点的作用及用法

什么是锚点

锚点是网页制作中超级链接的一种，又叫命名锚记，像一个迅速定位器一样，是一种页面内的超级链接，运用相当普遍。
使用命名锚记可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。创建到命名锚记的链接的过程分为两步。首先，创建命名锚记，然后创建到该命名锚记的链接。

如何创建锚点

1. 同一页面
   如下图，需要点击左侧目录单定位到相应的位置

<a :href="'#'XXX">点击</a>
<a :id="XXX">目标位置</a>

通过id 或者name绑定点击时要挑战的位置，id相对兼容一些

2. 不同页面
   在不同页面中，锚点定位在c.html中，从另外一个页面的链接跳转到这个锚点

 <a href="c.html#xxx">跳转到c页面</a>
c页面中  <a :id="XXX">目标位置</a> // XXX为锚点名称

3. js
   通过点击触发js事件，js事件中处理跳转到目标位置
   第一种方法：通过出发点击事件

<a href="#" onclick="add">跳转到c页面</a>
<a :id="XXX">目标位置</a>
add（）{
1.location.href = "#XXX";      // XXX为锚点名称
2、window.location.hash = "#XXX"; // XXX为锚点名称
}

第二种方法：scrollIntoView

<a href="#" onclick="document.getElemetnById('XXX').scrollIntoView(true);return false;">跳转到c页面</a>
<a :id="XXX">目标位置</a> // XXX为锚点名称