生成文章目录#

思路#

基于文章的标题生成目录，换句话说，就是将 h1,h2,h3 等标签的 dom 层次转化为树形结构。

实现#

首先要准备数据。

const list = [];

要实现类似如下的结构

[
  {
    title: "标题",
    href: "",
    children: [
      {
        title: "标题",
        href: "",
      },
    ],
  },
];

要生成目录结构，首先要获取文章的 dom 结构，现将标签放入数组。然后对齐进行筛选清晰，之留下我们需要的标题元素，即 h1,h2,h3 等标签，筛选完后放入另一个数组。

之后对数组进行遍历，提取我们需要的属性，以便对树形数据进行赋值，然后调用Array.push()将对象添加进数组内。

将文章目录与文章关联#

设置滚动#

监听页面滚动，计算页面的相对位置，来使目录滚动。

设置目录跳转文章对应位置#

可以使用锚点法，为文章的标题添加 id，再在目录的连接中添加#开头的标题 id

这样一来，点击目录是，页面就会滚动到指定位置。