介绍
anchor-js 是一个轻量级的 JavaScript 库，用于在网页中添加平滑滚动效果和锚点。它提供了许多选项，可以自定义滚动速度、偏移量、缓动函数等。
本文将详细介绍如何使用 anchor-js 在你的网站上添加平滑滚动效果和锚点。
安装
要使用 anchor-js，首先需要安装它。可以通过 npm 安装：
--- ------- ---------
或者从 GitHub 下载源代码：
--- ----- ------------------------------------------
下载源代码后，引入 dist/anchor.min.js 或 dist/anchor.js 文件到你的项目中即可。
使用
添加锚点
首先，在需要添加锚点的 HTML 元素上添加 id 属性，并在属性值前加上 # 符号。例如：
--- ---------------------- ------ ---------- --- ------- - ---- ----------- --- ---------------------- ------ ---------- --- ------- - ---- -----------
然后，在你的 JavaScript 代码中，初始化 anchor-js：
------ -------- ---- ------------ ----- ------ - --- -----------
这样就完成了初始化操作。现在可以点击锚点，页面会平滑滚动到对应的位置。
自定义选项
anchor-js 提供了许多选项，可以通过传递一个配置对象来进行自定义。例如：
----- ------ - --- ----------
---------- -------
------ ------------------
----- -----
-------- ------- ----- -- -
-------------------- -- ------------------------
--
---上面的代码将锚点放在文本的左侧，设置了自定义的 CSS 类名和图标，并添加了一个回调函数，在点击锚点时输出日志。
anchor-js 的所有配置选项如下：
placement: 锚点的位置。可选值为left、right、top或bottom。默认值为right。class: 自定义的 CSS 类名。默认为空字符串。icon: 显示在锚点旁边的图标或文本。默认值为#符号。onClick: 点击锚点时执行的回调函数。回调函数接收两个参数：event和link。event是一个鼠标事件对象，link是被点击的锚点元素。
修改样式
如果需要修改锚点的样式，可以使用自定义的 CSS 类名来实现。例如：
---------------- - ------ ---- ---------- ----- -
这会将锚点的颜色改为红色，字体大小改为 20 像素。
示例代码
以下是一个完整的示例代码，演示如何使用 anchor-js 添加平滑滚动效果和锚点：
--------- -----
------
------
--------------- ------------
----- ----------------
------- --------------
------ -------- ---- ------------------------------------
----- ------ - --- ----------
---------- -------
------ ------------------
----- -----
-------- ------- ----- -- -
-------------------- -- ------------------------
--
---
---------
-------
---------------- -
------ ----
---------- -----
-
--------
-------
------
------ ------------
----
------ ------------------------ ----------
------ ------------------------ ----------
-----
--- ---------------------- ----
----------------------------------------------------------- ----------
---------------------------------------------------------------------------------------