这是我参与「第五届青训营 」笔记创作活动的第12天

生成文章目录

思路

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

实现

首先要准备数据。

const list=[]

要实现类似如下的结构

[{
	title:'标题',
    href:'',
    children:[{
        title:'标题',
        href:''
    }]
}]

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

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

将文章目录与文章关联

设置滚动

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

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

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

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