效果图：
我们都知道锚点链接的跳转是通过<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>