提供一個插件，可以實現(xiàn)segmentfault的文章目錄效果啦~~

不止點擊跳轉(zhuǎn)還滾動激活當(dāng)前鏈接

demo地址

使用很簡單

<!-- 文章容器 --> <div id="kCatelog"></div> <!-- 目錄容器 --> <div class="k-catelog-list" id="catelogList"></div> new Katelog({contentEl: 'kCatelog',catelogEl: 'catelogList',linkClass: 'k-catelog-link',linkActiveClass: 'k-catelog-link-active',supplyTop: 20,selector: ['h2', 'h3'],active: function (el) {console.log(el);} });

支持IE8以上和主流的瀏覽器

contentEl

文章容器，id選擇器

catelogEl

目錄容器，id選擇器

linkClass

每個目錄項的類

linkActiveClass

當(dāng)前激活的目錄項的類

selector（可選）

選擇目錄的標(biāo)題元素，默認支持6級樹形結(jié)構(gòu)

默認值: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']

selector: ['h2', 'h3']

supplyTop（可選）

每個目錄需要補充的高度，比如fixed頭部布局會擋住實現(xiàn)，可以設(shè)置supplyTop來修正

如果對你有用的話，給個小星星吧！https://github.com/KELEN/k-ca...

總結(jié)

以上是生活随笔為你收集整理的文章目录自动生成器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。