懒鸟飞：帝国cms模板专业分享平台，新域名：lanniaofei.com
我们都知道锚点链接的跳转是通过<a href="#t0">标题</a>和<a name="t0"></a>实现的，点击a标签后，会跳转到与当前href值（除#号）与之相同的a标签name值的位置。
一般的文章都是都过h1-h5标题和p标签的富文本来实现，有些为了美观，比如csdn，只有总共1-3级标题，所以我们可以通过遍历文章内容的标题标签，进行生成对应的目录。
代码：
淘宝店
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>html,body{margin:0;padding:0;box-sizing: border-box;}.container{position: absolute;width:100%;height:100%;display: flex;}.directory{min-width: 200px;overflow-y: auto;}.content{flex:1;overflow-y: auto;}#category a{padding: 0 16px;/* font-weight: 500; */color: #2d2e2f;outline: none;text-decoration: none;line-height: 30px;}#category a:hover{background: #efefef;}</style>
</head>
<body><div class="container"><div class="directory"><div id="category"></div></div><div class="content"><h1>一、种植方法。</h1><div><h2>1.种植步骤。</h2><p>草莓适合种植在阳光充足，疏水性好的土壤里。土壤深度大约在8-10英寸。</p><div><h3>种植时间</h3><p>春天和秋天</p><div><h4>种植温度</h4><p>不热不冷</p><div><h5>种植土</h5><p>田野土</p></div></div></div><h2>2.日常养护</h2><p>多施肥，多浇水。</p></div><h1>二、水肥管理。</h1><div><h2>1.化肥选择。</h2><p>尿素和磷酸二氢钾。</p><h2>2.浇水频率</h2><p>每天三次，早中晚。</p></div><h1>三、枝叶修剪。</h1><div><h2>1.老叶病叶。</h2><p>出现老叶及时修剪，防止浪费多余营养。</p><h2>2.病根移除、</h2><p>发现病根及时处理掉，防止传染。</p></div><h1>四、人工授粉。</h1><div><h2>1.授粉</h2><p>毛笔刷</p></div><h1>五、新苗培育。</h1><div><h2>1.新苗。</h2><p>每到夏天，草莓就会生长很多匍匐茎。</p></div></div></div>
</body>
</html>
<script src='./jquery.3.2.1.min.js'></script>
<script>
//目录的生成需要等待文章加载完成之后再生成。
var padding=[10,20,30,40,50];//不同的标题等级缩进大小
$('.content').find('h1,h2,h3,h4,h5').each(function(index,item){var that=$(this);$('<a name="c'+index+'"></a>').insertBefore(that);//插入锚点地址var tagName=that[0].tagName.toLowerCase();var tagIndex=parseInt(tagName.charAt(1))-1;//根据标题等级分类，并设置不同的缩进。$('#category').append($('<a href="#c'+index+'" style="padding-left:'+padding[tagIndex]+'px;display:block;">'+that.text()+'</a>'));
});
</script>
