anchorate 是一个 JavaScript 库，可以帮助你创建锚点，滚动到锚点处，并创建目录。它可以让你的网页更加便于阅读和导航。在本文中，我们将学习如何使用 anchorate。
安装
首先，你需要安装 anchorate。你可以使用 npm 安装：
npm install anchorate --save
然后在你的 JavaScript 文件中导入 anchorate：
import anchorate from 'anchorate';
使用
在你的 HTML 文件中，为锚点添加 ID。例如：
<h2 id="section1">Section 1</h2> <p>Content of section 1</p> <h2 id="section2">Section 2</h2> <p>Content of section 2</p> <h2 id="section3">Section 3</h2> <p>Content of section 3</p>
在你的 JavaScript 文件中，调用 anchorate：
-- -------------------- ---- ------- -- ------- ----- ----------- - -------------- -- ------ ----- ------ - ----- -- -------- ----- ------- - ------------------------------- -- -- --------- ----------- ----- ------------ -------- ------- ---- ------- ---
参数
anchorate 接受下列参数：
root：指定锚点根元素，必须是一个 DOM 元素，默认为document.body。headers：指定标题元素，可以是一个字符串例如'h2'，也可以是一个选择器例如'h2, h3'。默认为'h2, h3, h4, h5, h6'。toc：指定目录的根元素，必须是一个 DOM 元素或选择器。默认为null，不创建目录。index：用作目录索引的 DOM 元素。默认为一个ul元素。indexClass：目录根元素的类名。默认为'anchorate-index'。itemClass：目录项的类名。默认为'anchorate-item'。activeClass：当前查看的目录项的类名。默认为'anchorate-active'。top：滚动到锚点的顶部边缘与窗口顶部之间的距离。默认为20。behavior：滚动的行为。默认为'smooth'。可以设置为'auto'。
示例
以下是完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ----------
-------
------
---- ---------------
------ ---- ------------
--- --------------------- ------
---------- -- ------- -----
--- --------------------- ------
---------- -- ------- -----
--- --------------------- ------
---------- -- ------- -----
------- --------------
------ --------- ---- ------------
----- ----------- - --------------
----- ------- - -----
----- ------- - -------------------------------
-----------
----- ------------
-------- --------
---- -------
---
---------
-------
-------结论
使用 anchorate 可以方便地创建锚点、滚动到锚点处和创建目录。我们在本文中详细介绍了如何安装和使用 anchorate，还讲解了该库的各种参数和示例代码。希望这篇文章能够帮助您更好地使用 anchorate。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb69ab5cbfe1ea061158d