简单说明

上面生成

目录是从 h2 开始遍历,不包含 h1。

先给 h2、h3、h4、h5 添加相同的 class,再给 h2、h3、h4、h5 添加 2、3、4、5 的 data-index 属性,用来区分标题等级。

函数的第一个参数是最大的标题等级,上面设置的是 2 ,也就是代表 h2。第二个参数是开始遍历的索引,上面设置为 0 就是从第 0 个标题开始遍历。

如果遍历到更小一级的标题就调用自身,传入更小一级的标题和当前的索引值继续遍历。如果遍历到更大一级的标题就返回生成的 HTML 目录。

遍历完成后生

成 HTML 目录列表,然后返回 HTML 目录列表。

目录跳转可以通过改变滚动条的高度来跳转,也可以给标题和链接添加 id 跳转。如果通过 id 跳转的话,一些使用固定定位的导航栏可能会挡住标题,而通过改变滚动条高度来跳转就可以很方便的设置标题显示的位置。

效果

以 Sass 简单使

用教程 这篇文章为例,生成的目录如下: