为自己的博客园添加目录锚点和返回顶部

 

 

下面的代码可以在博客园的“设置”里通过文件的方式引入。

方法一：

适合不会改代码的小白，以及不需要做个性化修改的朋友。

优点：只用操作1步

缺点：不能自定义锚点的范围（设置的基本可以通用），以及个性化定制

页首引入

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

 

例：

 

 

方法二：

适合会修改JS代码的朋友（可选择做个性化修改），比方法一多操作两步。

 

文件引入的方式不方便修改，于是我这里写在“设置”里；

 

如果你没有获取博客园JS的权限，那需要去提交申请获取。

我的一天时间就申请下来了，申请好了是这个样子

 

 

添加自动目录的基本原理

大概的原理就是遍历整个内容，找到其中的标题标签，即h2、h3，然后把这些标题插入到一个容器中，针对这个容器设置绝对定位的css即可。主要代码如下：

博客侧边栏广告内引入

 *经过我多次测试发现，为啥直接点复制代码，粘贴过去的代码就要报错，手动选择复制过去的代码就不会。

1. <scripttype="text/javascript">
2. //以下是锚点JS
3. var a = $(document);
4. a.ready(function(){
5. var b = $('body'),
6. d ='sideToolbar',
7. e ='sideCatalog',
8. f ='sideCatalog-catalog',
9. g ='sideCatalogBtn',
10. h ='sideToolbar-up',
11. 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>',
12. j ='',
13. k =200,
14. l =0,
15. m =0,
16. n =0,
17. //限制存在个数，如数量过多，则只显示h2，不显示h3
18. //o, p = 13,
19. o, p =100,
20. q =true,
21. r =true,
22. s = b;
23. if(s.length ===0){
24. return
25. };
26. b.append(i);
27. //指定获取目录的范围-------------这一点非常重要，因为每个人指定的范围都不一样，所以这是要修改的地方
28. //o = s.find(':header');
29. o = $('#cnblogs_post_body').find(':header')
30. if(o.length > p){
31. r =false;
32. var t = s.find('h2');
33. var u = s.find('h3');
34. if(t.length + u.length > p){
35. q =false
36. }
37. };
38. o.each(function(t){
39. var u = $(this),
40. v = u[0];
42. var title = u.text();
43. var text = u.text();
45. u.attr('id','autoid-'+ l +'-'+ m +'-'+ n)
46. //if (!u.attr('id')) {
47. // u.attr('id', 'autoid-' + l + '-' + m + '-' + n)
48. //};
49. if(v.localName ==='h2'){
50. l++;
51. m =0;
52. if(text.length >14) text = text.substr(0,20)+"...";
53. j +='<li><span>'+ l +'&nbsp&nbsp</span><a href="#'+ u.attr('id')+'" title="'+ title +'">'+ text +'</a><span class="sideCatalog-dot"></span></li>';
54. }elseif(v.localName ==='h3'){
55. m++;
56. n =0;
57. if(q){
58. if(text.length >12) text = text.substr(0,16)+"...";
59. j +='<li class="h2Offset"><span>'+ l +'.'+ m +'&nbsp&nbsp</span><a href="#'+ u.attr('id')+'" title="'+ title +'">'+ text +'</a></li>';
60. }
61. }elseif(v.localName ==='h4'){
62. n++;
63. if(r){
64. j +='<li class="h3Offset"><span>'+ l +'.'+ m +'.'+ n +'&nbsp&nbsp</span><a href="#'+ u.attr('id')+'" title="'+ title +'">'+ u.text()+'</a></li>';
65. }
66. }
67. });
68. $('#'+ f +'>ul').html(j);
69. b.data('spy','scroll');
70. b.data('target','.sideCatalogBg');
71. $('body').scrollspy({
72. target:'.sideCatalogBg'
73. });
74. $sideCatelog = $('#'+ e);
75. $('#'+ g).on('click',function(){
76. if($(this).hasClass('sideCatalogBtnDisable')){
77. $sideCatelog.css('visibility','hidden')
78. }else{
79. $sideCatelog.css('visibility','visible')
80. };
81. $(this).toggleClass('sideCatalogBtnDisable')
82. });
83. $('#'+ h).on('click',function(){
84. $("html,body").animate({
85. scrollTop:0
86. },500)
87. });
88. $sideToolbar = $('#'+ d);
90. //通过判断评论框是否存在显示索引目录
91. var commentDiv = $("#blog-comments-placeholder");
93. a.on('scroll',function(){
94. //评论框存在才调用方法
95. if(commentDiv.length >0){
96. var t = a.scrollTop();
97. if(t > k){
98. $sideToolbar.css('display','block');
99. $('#gotop').show()
100. }else{
101. $sideToolbar.css('display','none')
102. $('#gotop').hide()
103. }
104. }
105. })
106. });
107. //以上是锚点JS
108. //以下是返回顶部JS
109. $(function(){
110. $('body').append('<div id="gotop" onclick="goTop();"></div>');
111. });
113. function goTop(u, t, r){
114. var scrollActivate =!0;
115. if(scrollActivate){
116. u = u ||0.1;
117. t = t ||16;
118. var s =0,
119. q =0,
120. o =0,
121. p =0,
122. n =0,
123. j =0;
124. document.documentElement &&(s = document.documentElement.scrollLeft ||0, q = document.documentElement.scrollTop ||0);
125. document.body &&(o = document.body.scrollLeft ||0, p = document.body.scrollTop ||0);
126. n = window.scrollX ||0;
127. j = window.scrollY ||0;
128. s =Math.max(s,Math.max(o, n));
129. q =Math.max(q,Math.max(p, j));
130. p =1+ u;
131. window.scrollTo(Math.floor(s / p),Math.floor(q / p));
132. 0< s ||0< q ? window.setTimeout('goTop('+ u +', '+ t +')', t):'undefined'!=typeof r && r()
133. }else{
134. scrollActivate =!0
135. }
136. }
137. //以上是返回顶部JS
138. </script>

 

其中需要怎么定制，就看朋友们自己修改JS代码了

页首引入

1. <linktype="text/css"rel="stylesheet"href="https://files.cnblogs.com/files/miangao/maodian.css">

页尾引入

1. <scriptsrc="https://files.cnblogs.com/files/miangao/bootstrap.min.js"></script>

 

好了，这样就完成了，是不是很超级简单。

 

希望能给大家带来一点便利，谢谢！