我们经常看到一些内容很多的文章，都有目录导航。点击导航会跳转到相应位置。当页面滚动时，相应位置的导航也会出现选中状态。很方便。这里我们使用js做一个简单的实现实现思路是给文章中的标题标签h1和h2添加不同的id（比如只有h1和h2相同），得到文章内容中的h1和h2标签并使用它们将获取的标签转换为li和a标签，将id转换为href属性并将转换后的标签插入到目录需要显示的位置。写一个监控页面滚动的监听事件。编写点击事件。为文章中的标题标签添加不同的id。需要保证页面中的id不重复。这里使用循环赋值。该方法遍历h1h2重置id，获取文章内容中的title标签，并将获取的标签转化为li和a标签，将id转化为href属性varlist=[],idList=[]$('.j-article-connh1,.j-article-connh2').each(function(i){$(this).attr('id',i);idList.push(i)list.push(''+$(this).text()+'')});这里的判断在h2标签中添加了不同的样式，方便区分。将转换后的标签插入到目录需要显示的位置$('.j-titleList').prepend(a)编写监控页面滚动监听事件//页面滚动添加样式用于导航$(window).scroll(function(){for(leti=0;i$('#'+idList[i]).offset().top-100||$(this).scrollTop()+$(this).height()==$(document).height()){$('.j-titleList').find('li').eq(i).添加Class('active').siblings('li').removeClass('active');$('.j-bj').css('top',i*44)}}});写一个点击事件为点击的目录添加一个选中的样式，添加一个流畅的滚动动画，css样式需要自己定义let$root=$('html,body');$('.j-titleListlia').on("click",function(){$root.animate({scrollTop:$($.attr(this,'href')).offset().top-65},400);returnfalse});效果预览：https://blog.qianxiaoduan.com/archives/200永久链接：https://blog.qianxiaoduan.com/archives/200
