提供一個插件,可以實現segmentfault的文章目錄效果啦~~
不止點擊跳轉還滾動激活當前鏈接
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
當前激活的目錄項的類
selector(可選)
選擇目錄的標題元素,默認支持6級樹形結構
默認值: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
selector: ['h2', 'h3']
supplyTop(可選)
每個目錄需要補充的高度,比如fixed頭部布局會擋住實現,可以設置supplyTop來修正
如果對你有用的話,給個小星星吧!https://github.com/KELEN/k-ca...