在前端开发中，锚点是非常常见的一个功能，可以用来实现网页内跳转和平滑滚动等效果。但是，在使用锚点时，由于需要手动添加锚点以及对应的链接，非常容易出现链接与锚点不匹配的问题，这时候我们可以使用 npm 包 hanchor 进行快速的锚点生成和链接匹配。
hanchor 模块介绍
hanchor 是一个轻量级的 npm 包，它的主要功能是根据指定的内容快速生成唯一的链接，并且可以在页面加载时自动将链接与对应的锚点进行匹配。
hanchor 模块安装
在使用 hanchor 模块前，我们需要先将它安装到我们的项目中。可以使用如下命令进行安装：
npm install hanchor --save
hanchor 模块使用
1. 生成链接
在使用 hanchor 生成链接时，我们需要先引入这个模块：
const hanchor = require('hanchor');然后，我们就可以使用这个模块的 generate 函数来生成唯一的链接了：
const text = '这是一个测试标题'; const link = hanchor.generate(text);
其中，text 是我们想要生成链接的内容，link 是生成的唯一链接。
2. 页面锚点设置
在页面中添加锚点时，我们需要在 HTML 中使用 标签，并在 href 属性中添加生成好的链接：
<h1><a href="#这是一个测试标题">这是一个测试标题</a></h1>
3. 匹配链接与锚点
当页面加载完成后，我们需要使用 hanchor 模块来自动匹配链接与锚点。首先，我们需要在每个锚点处添加一个类名，例如：
<h1><a class="hanchor" href="#这是一个测试标题">这是一个测试标题</a></h1>
然后，我们需要在 JavaScript 中使用 hanchor 的 match 函数来匹配链接与锚点：
document.addEventListener('DOMContentLoaded', function() {
hanchor.match('.hanchor');
});此时，当我们点击页面中的链接时，就会自动跳转到对应的位置，并且当前链接会被自动添加 .active 类名，以便我们在页面中使用 CSS 进行样式控制。
hanchor 模块示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
-------------- ------------
-------
------- -
------ ----
-
--------
-------
------
------ --------------- ------------------------
----------------
------ --------------- ------------------------
----------------
------- ----------------------------------------------------
--------
--------------------------------------------- ---------- -
--------------------------
---
---------
-------
-------在这个示例中，我们首先在页面中添加了两个锚点，然后在 JavaScript 中使用 hanchor 的 match 函数进行链接和锚点的匹配，当我们点击页面中的链接时，就会自动跳转到对应的位置，并且当前链接会被自动添加 .active 类名。同时，我们在样式中设置了 .active 类名下的文本颜色为红色，当链接被选中时，就会变成红色。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a9381e8991b448d80fe