为自己的博客园添加目录锚点和返回顶部
（原创）背景：因为最近喜欢在博客园记一些笔记，发现笔记内容查阅起来不是很方便，缺乏一个内容目录，于是就做吧。
查阅了一些资料，发现都写的不够详细，所以就自己写一个，嫌麻烦，就把锚点和返回顶部写在一起了吧。
实现效果图
下面的代码可以在博客园的“设置”里通过文件的方式引入。
方法一：
适合不会改代码的小白，以及不需要做个性化修改的朋友。
优点：只用操作1步
缺点：不能自定义锚点的范围（设置的基本可以通用），以及个性化定制
页首引入
<link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/miangao/maodian.css">
<script src="https://files.cnblogs.com/files/miangao/maodian.js"></script>
<script src="https://files.cnblogs.com/files/miangao/bootstrap.min.js"></script>
例：
方法二：
适合会修改JS代码的朋友（可选择做个性化修改），比方法一多两步操作。
文件引入的方式不方便修改，于是我这里写在“设置”里；
如果你没有获取博客园JS的权限，那需要去提交申请获取。
我的一天时间就申请下来了，申请好了是这个样子
添加自动目录的基本原理
大概的原理就是遍历整个内容，找到其中的标题标签，即h2、h3，然后把这些标题插入到一个容器中，针对这个容器设置绝对定位的css即可。主要代码如下：
博客侧边栏广告内引入
*经过我多次测试发现，为啥直接点复制代码，粘贴过去的代码就要报错，手动选择复制过去的代码就不会。真是emmmmmmm
<script type="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 + '  </span><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a><span class="sideCatalog-dot"></span></li>';
} else if(v.localName === 'h3') {
m++;
n = 0;
if(q) {
if(text.length > 12) text = text.substr(0, 16) + "...";
j += '<li class="h2Offset"><span>' + l + '.' + m + '  </span><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a></li>';
}
} else if(v.localName === 'h4') {
n++;
if(r) {
j += '<li class="h3Offset"><span>' + l + '.' + m + '.' + n + '  </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>
其中需要怎么定制，就看朋友们自己修改JS代码了
页首引入
<link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/miangao/maodian.css">
页尾引入
<script src="https://files.cnblogs.com/files/miangao/bootstrap.min.js"></script>
好了，这样就完成了，是不是很超级简单。。。。。。我弄的时候可花费了半天的时间，，，衰..
希望能给大家带来一点便利，谢谢！
浙公网安备 33010602011771号