怎么实现网站文章自动生成目录列表（锚链接）
如果网站上一篇文章比较长的情况下 ，为了方便用户浏览自己所需要的部分，可以在文章的顶部添加一个目录列表，每一个列表项都是一个锚链接，点击后直接跳到指定位置。效果如下图：
怎么实现这种文章内容自动生成目录列表呢？我们主要使用JQUERY来实现。
第一步：引入JQUERY；
第二步：在目录列表位置，添加一个空的UL；
<ul id="toc-lists"></ul>
第三步：在主体内容最外面，放上一个ID类名：
id="leirongdiv";
第四步：在网页最底部，放上以下的JS代码来实现自动生成列表，并且可以锚点平滑滚动；
<script>
var modian = [];
var h2lr = [];
for(var i=0;i<$('#leirongdiv h2').length;i++){
modian.push($('#leirongdiv h2:nth-of-type('+(i+1)+')').attr('id'));
h2lr.push($('#leirongdiv h2:nth-of-type('+(i+1)+')').text());
}
for(var r=0;r< modian.length;r++){
var lis = '<li><a href="#'+modian[r]+'">'+h2lr[r]+'</a></li>';
$('#toc-lists').append(lis);
}
</script>
<script type="text/javascript">
//锚点平滑滚动
$(function(){
$('a[href*=#],area[href*=#]').click(function() {
if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') && location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({
scrollTop: targetOffset
},
1000);
return false;
}
}
});
})
</script>
第四步：在编辑文章内容时，使用以下的标题结构；
<h2 id="div1">栏目标题栏目标题</h2>