这个插件依据选定的目次内容中的 h1, h2, h3, h4, h5, h6 标签来自动天生目次插进去到选定的目次容器中，而且供应一个美丽的款式结果
- 监听内容区转动
- 点击跳转功用
兼容性：IE10+ (因为运用了 node.classList)
地点戳这里 github地点，迎接star，issue，pr ~
1. 预览
炫酷形式：
一般形式：
能够经由过程 线上DEMO 来预览一下炫酷形式的结果
2. 完成思绪
转动的监听经由过程 getBoundingClientRect 猎取元素大小以及相对视口的位置，推断我们的监听对象 h1~h6 标签是不是在视口中，假如在则增加 linkActiveClass 类。
传统的锚点定位跳转会与hash形式的单页面运用的路由争执，会导航到毛病的路由途径，这里采纳把要跳转的id放到 dataset 中，跳转的时刻取出来运用 scrollIntoView 来举行腻滑转动到目的位置。
左侧的边栏线则是运用 svg 的path来画出来的，依据层级响应做一些调解，辅以css的 transition 的结果就能够呈现出不错的挪动结果。
3. Api
假如要运用默许的款式，请手动引入
import 'progress-catalog/src/progress-catalog.css'运用方法：
// 引入
import Catalog from 'ProgressCatalog'
// 运用
new Catalog({
contentEl: 'loading-animation',
catalogEl: `catalog-content-wrapper`,
selector: ['h2', 'h3']
})组织函数接收的参数：
contentEl [String]
须要检索天生目次的内容区的id挑选器，不须要加#
catalogEl [String]
将天生的目次append进的目次容器的id挑选器，不须要加#
scrollWrapper [可选, String]
监听scroll事宜的内容区容器的id挑选器，不须要加#，假如不填则默许是 contentEl 的父元素
linkClass [可选, String]
一切目次项都有的类，默许值：cl-link
注重，假如设置了此值，则须要重写默许款式
linkActiveClass [可选, String]
激活的目次项一切的类，默许值：cl-link-active
注重，假如设置了此值，则须要重写默许款式
selector [可选, Array]
挑选目次的题目标签，默许值：['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
假如只愿望天生目的内容区的 h2, h3 标签的目次，那末能够设置 selector: ['h2', 'h3']
activeHook [可选, Function]
当激活新的目次项标签的时刻的回调函数
topMargin [可选, Number]
第一个目次标签在被以为可见之前须要向下挪动的间隔，默许值：0
bottomMargin [可选, Number]
同上，向下挪动的间隔，默许值：0
cool [可选, Boolean]
炫酷形式开关，默许值：true
网上的帖子大多深浅不一，以至有些前后矛盾，鄙人的文章都是进修过程当中的总结，假如发明毛病，迎接留言指出~
参考：
PS：迎接人人关注我的民众号【前端下午茶】，一同加油吧~
别的能够到场「前端下午茶交换群」微信群，长按辨认下面二维码即可加我挚友，备注加群，我拉你入群～
