什么是 npm 包 anchor ？
anchor 是一个轻量级的 JavaScript 库，用于为页面创建固定的导航栏。它可以帮助用户在浏览网页时更方便地导航到页面的不同部分。
anchor 最初是作为 jQuery 插件开发的，并且成功地将其移植到了独立的 npm 模块中。现在，再也没有必要使用 jQuery 来使用 anchor，因为它是一个独立于框架的库。
如何使用 anchor
如果你已经使用 npm 的话，你可以直接在你的项目中使用 npm 安装 anchor：
npm install anchor-js
如果你使用的是 yarn 包管理器，你可以使用以下命令来安装：
yarn add anchor-js
完成后，你就可以在你的项目中引用 anchor 了：
import AnchorJS from 'anchor-js'; const anchors = new AnchorJS(); anchors.add();
如果你的项目不使用包管理器，你也可以在 HTML 页面中引用 anchor：
<script src="path/to/anchor.min.js"></script> <script> const anchors = new AnchorJS(); anchors.add(); </script>
如何配置 anchor
anchor 的默认配置应该足够满足大多数用户的需求。然而，如果你想进行一些自定义设置，anchor 也允许你方便地设置。
以下是一些常见的自定义设置示例：
1. 修改链接文本的格式
默认情况下，anchor 会为每个导航链接使用标题的文本作为链接文本。如果你想对链接文本进行格式化，你可以使用 format 选项。例如，以下代码将在链接文本前添加“§”符号：
const anchors = new AnchorJS({
format: '§{{section}}'
});
anchors.add();2. 配置偏移量
默认情况下，anchor 会放置导航栏在页面左边缘，距离页面顶部 50px 的位置。如果你希望将它放置在页面其他位置，你可以使用 offset 选项：
const anchors = new AnchorJS({
offset: 100
});
anchors.add();3. 导航的时候显示链接的动画效果
你可以使用 easing 和 duration 选项来配置导航链接的动画效果：
const anchors = new AnchorJS({
easing: 'linear',
duration: 1000
});
anchors.add();以上代码将在 1000 毫秒内使用线性的缓动动画效果展示导航链接。
总结
anchor 提供了一种简单而有效的方法来创建固定导航栏，使用户更方便地导航到页面的不同部分。除此之外，anchor 还允许你方便地进行自定义设置。如果你正在寻找一种轻量级的导航栏解决方案，anchor 是一款不错的选择。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- ------------
------- --------------------------------------------------------------------
-------
---- -
--------- ---------
----- --
---- -----
------ ------
------- ------
----------------- -----
-------- -----
-
-- -
----------- -----
-
--------
-------
------
---- ---------------
------------ ---------
-------- ----- ----- --- ----- ----------- ---------- ----- --------- ------- ---- -- ----- ------ --------- ----- --------- ------------ -------- ----- --------- -------- -- ----- -- --------- ----- -- ------ -------- ----------- ----- ------- -------- - ------- --- -------- -- ----- ----- ------ --------- -------- --------- -------- ---- --- -------- --------------
----------- ------
------------ ---- ------- ------- -- ------- --- ------ ----- ------ ----- --------- ---- ------- ----- ----- --- -------- ---- ------ --- ------- -------- ----- -- ------ ---------- ---- ---- -------- ------ -- ---------- ---- ----- -- ----- ------- ----- ------ ----------
----------- ------
-------- ------ ------ --------- --- ------- -- ----------- ---- ----- ------- ------- -------- ------- ----- ------ ---- ------- --- ----- ------ ----- --- ----- --------- -------- --------- -------- -------- ---- --- ------- --- -------- -- --- --- ----------- ------------
----------- ------
------------- ------- ----- ------- --- ----------- ---- -------- ---- --------- --- ---- ----- ----- ---- ----- ------ ------ ------- --------- ----- - -------- ----- -- ------ --- ------ --------- --------- --------- -------- ------- ----- ------- ----- ------- -----------------
----------- ------
---------- ---- --------- ----- -- --------- ------- ----- ------- ------ ---- ---------- ---------- ------ ------- ------ --- ----- -------- ---- ------- ----- --------- ----------- -------- --------- ------ ---- -- ---- ---------- --- -------- --- --------------
--------
----- ------- - --- ----------
---------- -------
---------- -------
------- ---------------
------- ---
---
--------------
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67370