1. 概述

锚点，使用命名锚记可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。创建到命名锚记的链接的过程分为两步。首先，创建命名锚记，然后创建到该命名锚记的链接。

文章主要介绍锚点和 锚点导航 的实现方式和逻辑处理，以下介绍锚点实现的逻辑、相关技术和逻辑处理，使用不同方式实现锚点导航。

用到的知识点， offsetTop、scroll、scrollIntoView。

offsetTop： HTMLElement.offsetTop 只读属性返回当前元素的外边框相对于 offsetParent（最近的定位祖先元素）顶部的内边框的距离。注意，相对的是由定位元素，可以通过 offsetParent，获取当前元素是相对于哪个元素定位的节点。

scroll： 滚动事件，用于监听滚动的距离等，用于控制当元素滚动时控制锚点导航的激活状态。

scrollIntoView： Element 接口的 scrollIntoView() 方法滚动元素的祖先容器，以便用户可以看到调用scrollIntoView() 的元素。

2. 实现效果

效果说明，点击导航自动滚动到指定的位置，滚动同样触发导航选中高亮，完美实现锚点导航的逻辑和效果。导航在操作的过程中出现了黑色是 gif 录制的问题，不是逻辑实现的问题。