背景
首个版本
https://www.ouorz.com/366
修改意见
鉴于单个 H 标签设置比较麻烦纠结，而且有主题用户反馈，索性改成可以分级的啦
代码
var count_ti = count_in = count_ar = count_sc = count_hr = count_e = 1;var offset = new Array;$('.article-content h3').each(function () { //each获取h3内容 $('#article-index').html($('#article-index').html() + '<li id="ti' + (count_ti++) + '"><a onclick="$(\'body\').animate({ scrollTop: $(\'#in' + (count_hr++) + '\').offset().top - 100 }, 500);"><i class="czs-circle-l"></i> ' + $(this).eq(0).html() + '</a></li>'); $(this).eq(0).attr('id', 'in' + (count_in++)); //h3添加id offset[0] = 0; offset[count_ar++] = $(this).eq(0).offset().top; //h3位置存入数组 count_e++});if (count_e !== 1) { //若存在h3标签 $(window).scroll(function () { //滑动窗口时 var scroH = $(this).scrollTop() + 130; var navH = offset[count_sc]; //从1开始获取当前h3位置 var navH_prev = offset[count_sc - 1]; //获取上一个h3位置(以备回滑) if (scroH >= navH) { //滑过当前h3位置 $('#ti' + (count_sc - 1)).attr('class', ''); $('#ti' + count_sc).attr('class', 'active'); count_sc++; //调至下一个h3位置 } if (scroH <= navH_prev) { //滑回上一个h3位置,调至上一个h3位置 $('#ti' + (count_sc - 2)).attr('class', 'active'); count_sc--; $('#ti' + count_sc).attr('class', ''); } });} else { $('.index-div').css('display', 'none')}↑ JavaScript 代码
批注
$(“:header”) 可以获取标题标签（Hx）
prop(“tagName”).replace(‘H’, ”) 可以获取到标签级别