方法一：

適合不會改代碼的小白，以及不須要作個性化修改的朋友。css

優勢：只用操做1步html

缺點：不能自定義錨點的範圍（設置的基本能夠通用），以及個性化定製java

頁首引入

<linktype="text/css"rel="stylesheet"href="http://files.cnblogs.com/files/miangao/maodian.css">
<scriptsrc="http://files.cnblogs.com/files/miangao/maodian.js"></script>
<scriptsrc="http://files.cnblogs.com/files/miangao/bootstrap.min.js"></script>

例：bootstrap

方法二：

適合會修改JS代碼的朋友（可選擇作個性化修改），比方法一多操做兩步。app

文件引入的方式不方便修改，因而我這裏寫在「設置」裏；ide

若是你沒有獲取博客園JS的權限，那須要去提交申請獲取。post

個人一天時間就申請下來了，申請好了是這個樣子測試

添加自動目錄的基本原理this

大概的原理就是遍歷整個內容，找到其中的標題標籤，即h二、h3，而後把這些標題插入到一個容器中，針對這個容器設置絕對定位的css便可。主要代碼以下：

博客側邊欄廣告內引入

*通過我屢次測試發現，爲啥直接點複製代碼，粘貼過去的代碼就要報錯，手動選擇複製過去的代碼就不會。

<scripttype="text/javascript">
//如下是錨點JS
var a = $(document);
a.ready(function(){
var b = $('body'),
d ='sideToolbar',
e ='sideCatalog',
f ='sideCatalog-catalog',
g ='sideCatalogBtn',
h ='sideToolbar-up',
i ='<div id="sideToolbar"style="display:none;">\<div class="sideCatalogBg"id="sideCatalog">\<div id="sideCatalog-sidebar">\<div class="sideCatalog-sidebar-top"></div>\<div class="sideCatalog-sidebar-bottom"></div>\</div>\<div id="sideCatalog-catalog">\<ul class="nav"style="width:225px;zoom:1">\</ul>\</div>\</div>\<a href="javascript:void(0);"id="sideCatalogBtn"class="sideCatalogBtnDisable"></a>\</div>',
j ='',
k =200,
l =0,
m =0,
n =0,
//限制存在個數，如數量過多，則只顯示h2，不顯示h3
//o, p = 13,
o, p =100,
q =true,
r =true,
s = b;
if(s.length ===0){
return
};
b.append(i);
//指定獲取目錄的範圍-------------這一點很是重要，由於每一個人指定的範圍都不同，因此這是要修改的地方
//o = s.find(':header');
o = $('#cnblogs_post_body').find(':header')
if(o.length > p){
r =false;
var t = s.find('h2');
var u = s.find('h3');
if(t.length + u.length > p){
q =false
}
};
o.each(function(t){
var u = $(this),
v = u[0];
var title = u.text();
var text = u.text();
u.attr('id','autoid-'+ l +'-'+ m +'-'+ n)
//if (!u.attr('id')) {
// u.attr('id', 'autoid-' + l + '-' + m + '-' + n)
//};
if(v.localName ==='h2'){
l++;
m =0;
if(text.length >14) text = text.substr(0,20)+"...";
j +='<li><span>'+ l +'&nbsp&nbsp</span><a href="#'+ u.attr('id')+'" title="'+ title +'">'+ text +'</a><span class="sideCatalog-dot"></span></li>';
}elseif(v.localName ==='h3'){
m++;
n =0;
if(q){
if(text.length >12) text = text.substr(0,16)+"...";
j +='<li class="h2Offset"><span>'+ l +'.'+ m +'&nbsp&nbsp</span><a href="#'+ u.attr('id')+'" title="'+ title +'">'+ text +'</a></li>';
}
}elseif(v.localName ==='h4'){
n++;
if(r){
j +='<li class="h3Offset"><span>'+ l +'.'+ m +'.'+ n +'&nbsp&nbsp</span><a href="#'+ u.attr('id')+'" title="'+ title +'">'+ u.text()+'</a></li>';
}
}
});
$('#'+ f +'>ul').html(j);
b.data('spy','scroll');
b.data('target','.sideCatalogBg');
$('body').scrollspy({
target:'.sideCatalogBg'
});
$sideCatelog = $('#'+ e);
$('#'+ g).on('click',function(){
if($(this).hasClass('sideCatalogBtnDisable')){
$sideCatelog.css('visibility','hidden')
}else{
$sideCatelog.css('visibility','visible')
};
$(this).toggleClass('sideCatalogBtnDisable')
});
$('#'+ h).on('click',function(){
$("html,body").animate({
scrollTop:0
},500)
});
$sideToolbar = $('#'+ d);
//經過判斷評論框是否存在顯示索引目錄
var commentDiv = $("#blog-comments-placeholder");
a.on('scroll',function(){
//評論框存在才調用方法
if(commentDiv.length >0){
var t = a.scrollTop();
if(t > k){
$sideToolbar.css('display','block');
$('#gotop').show()
}else{
$sideToolbar.css('display','none')
$('#gotop').hide()
}
}
})
});
//以上是錨點JS
//如下是返回頂部JS
$(function(){
$('body').append('<div id="gotop" onclick="goTop();"></div>');
});
function goTop(u, t, r){
var scrollActivate =!0;
if(scrollActivate){
u = u ||0.1;
t = t ||16;
var s =0,
q =0,
o =0,
p =0,
n =0,
j =0;
document.documentElement &&(s = document.documentElement.scrollLeft ||0, q = document.documentElement.scrollTop ||0);
document.body &&(o = document.body.scrollLeft ||0, p = document.body.scrollTop ||0);
n = window.scrollX ||0;
j = window.scrollY ||0;
s =Math.max(s,Math.max(o, n));
q =Math.max(q,Math.max(p, j));
p =1+ u;
window.scrollTo(Math.floor(s / p),Math.floor(q / p));
0< s ||0< q ? window.setTimeout('goTop('+ u +', '+ t +')', t):'undefined'!=typeof r && r()
}else{
scrollActivate =!0
}
}
//以上是返回頂部JS
</script>