文章标题目录锚点功能

⽂章标题⽬录锚点功能
想必⼤家开发⽹站，可能会⽤到⼀些⽂章或者⼀段长篇幅的介绍，那么⽅便⽤户阅读与定位，这个功能就⼗分⽅便啦
最近刚开发的新站中，对于软件的介绍内容，需要做标题的提取与锚点定位，就如下图效果所⽰：
项⽬地址在软件内容展⽰页⾯中
这个时候，对于后台动态⽣成的内容，我们如何去提取标题并且⽣成⽬录呢，⼜如何去确定标题所在⽂档的⾼度，并且在图⽚加载完成后不影响⾼度的定位？
从思路上，我们⾸先考虑到如何去使⽤后⾯我们所要写的函数，我们需要提供⼀些什么？
我们需要提供动态⽣成⽂章的容器，与⽣成标题的标签，例如特定的.title类名，或者h2, h3等标签。

然后，将两个元素作为参数传⼊我们的函数中，在函数中我们去做⼀系列的处理
根据标题标签获取所有标签，
并等待所有图⽚加载后获取标签所在⾼度放到⼀个数组中，
创建侧边⽬录导航加⼊页⾯，添加点击功能与锚点定位
下⾯展⽰代码
;(function(win, $){
class ContentFixNav {
constructor(wrap, title) {
this.wrapDoms = wrap;
this.titleDoms = title;
this.init();
}
init() {
this.hHeightArr = []; //初始化数组容器存放锚点⾼度
this.render(); // 渲染功能
}
render() {
$('body').append($('<div id="content-nav"></div>')); // ⽣成侧边⽬录存放的容器加⼊页⾯中
this.contentNav = $('#content-nav'); // 声明容器
let _this = this;
this.titleDoms.each(function(index, el) {
let textArr = $(this).text().trim().replace(/\s+/g, ' ').split(' '),
_text = textArr[textArr.length-1],
newText = _text.replace(/\s|\w|:|\(|\)/g, ''); // 做⼀些标题提取后⽂案处理，以标题的空格分割，提取最后⼀组⽂案，把⼀些不需要的符号去除
newText.length < 4? newText = _text.replace(/\s|:|\(|\)/g, ''): newText = newText.substr(newText.length - 4); // 如果剩余⽂案字符不⾜4个字符，删除符号，⾜够就取最后四个 let $span = $('<span>').text(newText); // ⽣成⽬录放⼊容器
_this.contentNav.append($span);
});
this.getHeightArr(); // 调⽤获取⾼度
}
getHeightArr() {
let imgs = this.wrapDoms.find('img'), // 获取整个⽂章容器中图⽚
len = imgs.length,
promiseAll = [],
_this = this;
for(let i = 0 ; i < len ; i++){ // 遍历⽣成promise对象加⼊到数组中
promiseAll[i] = new Promise((resolve, reject)=>{
if(imgs[i].complete) { // 这⾥判断图⽚已经完成的改变状态为成功
resolve(imgs[i])
}else {
imgs[i].onload = function(){ // 否则等图⽚加载后改变状态为成功
resolve(imgs[i])
}
}
})
};
Promise.all(promiseAll).then((img)=>{ // Promise.all⽅法⽤于将多个 Promise 实例，包装成⼀个新的 Promise 实例, 等到所有promise都状态为成功后进⼊ .then 回调
_this.titleDoms.each(function(index, el) { // 遍历标题获取⾼度加⼊到锚点数组中
_this.hHeightArr.push(Math.ceil($(el).offset().top));
})
_this.contentNav.show(); // 显⽰锚点⽬录
_this.initEvent(); // 初始事件
})
}
initEvent() {
this.contentNav.on('click', 'span', this.scrollToHeight.bind(this)); // 初始点击定位功能
$(window).on('scroll', this.watchScroll.bind(this)); // 初始滚动监听
}
scrollToHeight(e) {
let _index = $(e.target).index(),
_this = this;
$('body, html').animate({ scrollTop: _this.hHeightArr[_index] }, 300); // 滚动到指定位置
}
watchScroll(e) {
let navs = this.contentNav.children('span'),
scrollTop = $(e.target).scrollTop(),
_index,
_this = this;
// 遍历锚点⾼度数组，根据区间确当当前位置索引，添加选择状态
for (let i = 0; i < _this.hHeightArr.length; i++) {
let height_0 = _this.hHeightArr[0],
height_1 = _this.hHeightArr[i],
height_2 = _this.hHeightArr[i+1];
if(height_0 > scrollTop) {
_index = -1;
break;
} else if(!height_2 || (height_1 <= scrollTop && height_2 > scrollTop)) {
_index = i;
break;
}
}
_index >= 0 ? __commonToggleActive(navs.eq(_index)): navs.removeClass('active'); // __commonToggleActive 前⾯我有写道的公共⽅法，切换当前状态类 }
}
win.ContentFixNav = ContentFixNav;
})(window, $);
// 在其他地⽅调⽤
let wrap = '', h3 = '';
new ContentFixNav(wrap, h3);
我的样式⽂件⾥⾯，容器与⽬录是这样的
#content-nav
width auto
padding-left 15px
position fixed
left 50%
margin-left -680px
top 60%
z-index 999
display none
span
display block
font-size 12px
cursor pointer
white-space nowrap
height 30px
line-height 30px
position relative
color #999
&.active
color #1398ff
&:before
background-color #1398ff
&:before
content ""
position absolute
left -12px
top 13px
width 5px
height 5px
border-radius 50%
background-color #bbb
这样就可以实现⽂章⽬录提取与锚点定位啦~ 感谢观看。