提供一个插件,能够实现segmentfault的文章目录效果啦~~javascript
不止点击跳转还滚动激活当前连接html
demo地址java
使用很简单git
<!-- 文章容器 --> <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以上和主流的浏览器github
contentElsegmentfault
文章容器,id选择器浏览器
catelogEl布局
目录容器,id选择器插件
linkClasscode
每一个目录项的类
linkActiveClass
当前激活的目录项的类
selector(可选)
选择目录的标题元素,默认支持6级树形结构
默认值: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
selector: ['h2', 'h3']
supplyTop(可选)
每一个目录须要补充的高度,好比fixed头部布局会挡住实现,能够设置supplyTop来修正
若是对你有用的话,给个小星星吧!https://github.com/KELEN/k-ca...