博客园文章生成目录

参考博客

Css

/*生成博客目录的CSS*/

#uprightsideBar{

font-size:12px;

font-family:Arial, Helvetica, sans-serif;

text-align:left;

position:fixed;/*将div的位置固定到距离top:50px，right:0px的位置，这样div就会处在最右边的位置，距离顶部50px*/

top:50px;

right:0px;

width: auto;

height: auto;

}

#sideBarTab{

float:left;

width:30px;

border:1px solid #e5e5e5;

border-right:none;

text-align:center;

background:#ffffff;

}

#sideBarContents{

float:left;

overflow:auto;

overflow-x:hidden;!important;

width:200px;

min-height:108px;

max-height:460px;

border:1px solid #e5e5e5;

border-right:none;

background:#ffffff;

}

#sideBarContents dl{

margin:0;

padding:0;

}

#sideBarContents dt{

margin-top:5px;

margin-left:5px;

}

#sideBarContents dd, dt {

cursor: pointer;

}

#sideBarContents dd:hover, dt:hover {

color:#A7995A;

}

#sideBarContents dd{

margin-left:20px;

}

页首-作用生成右侧目录链接

功能：生成博客目录的JS工具

测试：IE8，火狐，google测试通过

孤傲苍狼

2014-5-11

var BlogDirectory = {

获取元素位置，距浏览器左边界的距离（left）和距浏览器上边界的距离（top）

getElementPosition:function (ele) {

var topPosition = 0;

var leftPosition = 0;

while (ele){

topPosition += ele.offsetTop;

leftPosition += ele.offsetLeft;

ele = ele.offsetParent;

}

return {top:topPosition, left:leftPosition};

获取滚动条当前位置

getScrollBarPosition:function () {

var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop;

return scrollBarPosition;

移动滚动条，finalPos 为目的位置，internal 为移动速度

moveScrollBar:function(finalpos, interval) {

//若不支持此方法，则退出

if(!window.scrollTo) {

return false;

}

//窗体滚动时，禁用鼠标滚轮

window.onmousewheel = function(){

return false;

};

//清除计时

if (document.body.movement) {

clearTimeout(document.body.movement);

}

var currentpos =BlogDirectory.getScrollBarPosition();//获取滚动条当前位置

var dist = 0;

if (currentpos == finalpos) {//到达预定位置，则解禁鼠标滚轮，并退出

window.onmousewheel = function(){

return true;

}

return true;

}

if (currentpos < finalpos) {//未到达，则计算下一步所要移动的距离

dist = Math.ceil((finalpos - currentpos)/10);

currentpos += dist;

}

if (currentpos > finalpos) {

dist = Math.ceil((currentpos - finalpos)/10);

currentpos -= dist;

}

var scrTop = BlogDirectory.getScrollBarPosition();//获取滚动条当前位置

window.scrollTo(0, currentpos);//移动窗口

if(BlogDirectory.getScrollBarPosition() == scrTop)//若已到底部，则解禁鼠标滚轮，并退出

{

window.onmousewheel = function(){

return true;

}

return true;

}

//进行下一步移动

var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")";

document.body.movement = setTimeout(repeat, interval);

htmlDecode:function (text){

var temp = document.createElement("div");

temp.innerHTML = text;

var output = temp.innerText || temp.textContent;

temp = null;

return output;

创建博客目录，

id表示包含博文正文的 div 容器的 id，

mt 和 st 分别表示主标题和次级标题的标签名称（如 H2、H3，大写或小写都可以！），

interval 表示移动的速度

createBlogDirectory:function (id, mt, st, interval){

//获取博文正文div容器

var elem = document.getElementById(id);

if(!elem) return false;

//获取div中所有元素结点

var nodes = elem.getElementsByTagName("*");

//创建博客目录的div容器

var divSideBar = document.createElement('DIV');

divSideBar.className = 'uprightsideBar';

divSideBar.setAttribute('id', 'uprightsideBar');

var divSideBarTab = document.createElement('DIV');

divSideBarTab.setAttribute('id', 'sideBarTab');

divSideBar.appendChild(divSideBarTab);

var h2 = document.createElement('H2');

divSideBarTab.appendChild(h2);

var txt = document.createTextNode('目录导航');

h2.appendChild(txt);

var divSideBarContents = document.createElement('DIV');

divSideBarContents.style.display = 'none';

divSideBarContents.setAttribute('id', 'sideBarContents');

divSideBar.appendChild(divSideBarContents);

//创建自定义列表

var dlist = document.createElement("dl");

divSideBarContents.appendChild(dlist);

var num = 0;//统计找到的mt和st

mt = mt.toUpperCase();//转化成大写

st = st.toUpperCase();//转化成大写

//遍历所有元素结点

for(var i=0; i<nodes.length; i++)

{

if(nodes[i].nodeName == mt|| nodes[i].nodeName == st)

{

//获取标题文本

var nodetext = nodes[i].innerHTML.replace(/<\/?[^>]+>/g,"");//innerHTML里面的内容可能有HTML标签，所以用正则表达式去除HTML的标签

nodetext = nodetext.replace(/ /ig, "");//替换掉所有的

nodetext = BlogDirectory.htmlDecode(nodetext);

//插入锚

nodes[i].setAttribute("id", "blogTitle" + num);

var item;

switch(nodes[i].nodeName)

{

case mt: //若为主标题

item = document.createElement("dt");

break;

case st: //若为子标题

item = document.createElement("dd");

break;

}

//创建锚链接

var itemtext = document.createTextNode(nodetext);

item.appendChild(itemtext);

item.setAttribute("name", num);

item.onclick = function(){ //添加鼠标点击触发函数

var pos = BlogDirectory.getElementPosition(document.getElementById("blogTitle" + this.getAttribute("name")));

if(!BlogDirectory.moveScrollBar(pos.top, interval)) return false;

};

//将自定义表项加入自定义列表中

dlist.appendChild(item);

num++;

}

if(num == 0) return false;

/*鼠标进入时的事件处理*/

divSideBarTab.onmouseenter = function(){

divSideBarContents.style.display = 'block';

}

/*鼠标离开时的事件处理*/

divSideBar.onmouseleave = function() {

divSideBarContents.style.display = 'none';

}

document.body.appendChild(divSideBar);

}

};

window.onload=function(){

/*页面加载完成之后生成博客目录*/

BlogDirectory.createBlogDirectory("cnblogs_post_body","h2","h3",20);

}

</script>

页脚html代码

// 生成目录索引列表

// ref: http://www.cnblogs.com/wangqiguo/p/4355032.html

// modified by: zzq

function GenerateContentList()

{

var mainContent = $('#cnblogs_post_body');

var h2_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h2,只需要将这里的h2换掉即可

if(mainContent.length < 1)

return;

if(h2_list.length>0)

{

var content = '<a name="_labelTop"></a>';

content += '<div id="navCategory" style="color:#152e97;">';

content += '<p style="font-size:18px;"><b>目录</b></p>';

content += '<ul>';

for(var i=0; i<h2_list.length; i++)

{

var go_to_top = '<div style="text-align: right;"><a href="#_labelTop" style="color:#f68a33">回到顶部</a><a name="_label' + i + '"></a></div>';

$(h2_list[i]).before(go_to_top);

var h3_list = $(h2_list[i]).nextAll("h3");

var li3_content = '';

for(var j=0; j<h3_list.length; j++)

{

var tmp = $(h3_list[j]).prevAll('h2').first();

if(!tmp.is(h2_list[i]))

break;

var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';

$(h3_list[j]).before(li3_anchor);

li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>';

}

var li2_content = '';

if(li3_content.length > 0)

li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';

else

li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';

content += li2_content;

}

content += '</ul>';

content += '</div><p> </p>';

content += '<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>';

if($('#cnblogs_post_body').length != 0 )

{

$($('#cnblogs_post_body')[0]).prepend(content);

}

GenerateContentList();

</script>

博客园-秒音天女

[为博客园添加目录的方法总结 - 妙音天女 - 博客园](https://www.cnblogs.com/xuehaoyue/p/6650533.html

<title>为博客园添加目录的方法总结 - 妙音天女 - 博客园</title>

var currentBlogId = 329862;

var currentBlogApp = 'xuehaoyue';

var cb_enable_mathjax = false;

var isLogined = true;

var isBlogOwner = false;

var skinName = 'red_autumnal_leaves';

var visitorUserId = 'a693a5ff-d75d-452a-4edb-08d5af5cce02';

</script>

var currentPostDateAdded = '2017-03-31 11:40';

</script>

</head>

<body>

<div id="page_begin_html"><script type="text/javascript">window['__document_write_ajax_callbacks__']['2']();</script><script type="text/javascript">window['__document_write_ajax_callbacks__']['1']();</script></div>

</h1>

<h2>

</h2>

</div>

博客园</a>

</li>

<li>

首页</a>

</li>

<li>

新随笔</a>

</li>

<li>

联系</a></li>

<li>

</li>

<li>

管理</a>

</li>

</ul>

<span id="stats_post_count">随笔 -

40  </span>

<span id="stats_article_count">文章 -

1  </span>

<span id="stats-comment_count">评论 -

59</span>

</div>

</div>

</div>

<span>为博客园添加目录的方法总结</span>

</a>

</h1>

<div id="cnblogs_post_body" class="blogpost-body cnblogs-markdown"><a name="_labelTop"></a><div id="navCategory" style="color:#152e97;"><p style="font-size:18px;"><b>目录</b></p><ul><li><a href="#_label0">第一种：在正文上方直接添加目录</a><ul><li><a href="#_label0_0">1. 申请开通js权限</a></li><li><a href="#_label0_1">2. 添加js脚本到"页脚Html代码"</a></li><li><a href="#_label0_2">3. 按格式写文章</a></li></ul></li><li><a href="#_label1">第二种：在文章右上角添加目录导航</a><ul><li><a href="#_label1_0">1. 申请开通js权限</a></li><li><a href="#_label1_1">2. 添加css代码到"页面定制CSS代码"</a></li><li><a href="#_label1_2">3. 添加js脚本到"页首Html代码"</a></li><li><a href="#_label1_3">4. 按格式写文章</a></li></ul></li></ul></div><p> </p><hr style="height:1px;border:none;border-top:1px dashed #0066CC;">

<a href="http://www.cnblogs.com/xdp-gacl/p/3718879.html#2937655">http://www.cnblogs.com/xdp-gacl/p/3718879.html#2937655</a><br>

<a href="http://www.cnblogs.com/zzqcn/p/4657124.html">http://www.cnblogs.com/zzqcn/p/4657124.html</a><br>

<a href="http://www.cnblogs.com/jiangz/p/3734968.html">http://www.cnblogs.com/jiangz/p/3734968.html</a></p>

<div style="text-align: right;"><a href="#_labelTop" style="color:#f68a33">回到顶部</a><a name="_label0"></a></div><h2 id="blogTitle0">第一种：在正文上方直接添加目录</h2>

<a name="_label0_0"></a><h3 id="blogTitle1">1. 申请开通js权限</h3>

<p>默认是不支持，需要打开博客园后台，进入"设置"标签页，点击"申请开通js权限"，并注明用途<br>

如果想加快申请速度，也可以再向官方发个邮件（邮箱是<a href="mailto:contact@cnblogs.com">contact@cnblogs.com</a>），邮件也需要注明用途，快的话1小时就能搞定了</p>

<a name="_label0_1"></a><h3 id="blogTitle2">2. 添加js脚本到"页脚Html代码"</h3>

<p>打开博客园后台，进入"设置"标签页，在最下面的"页脚Html代码"对应的编辑框粘贴下面的js代码，然后点"保存"按钮保存。<br>

（如果没有开通js权限，此处无法添加）<br>

<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">language</span>=<span class="hljs-string">"javascript"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>></span><span class="javascript">

<span class="hljs-comment">// 生成目录索引列表</span>

<span class="hljs-comment">// ref: http://www.cnblogs.com/wangqiguo/p/4355032.html</span>

<span class="hljs-comment">// modified by: zzq</span>

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">GenerateContentList</span>(<span class="hljs-params"></span>)

</span>{

<span class="hljs-keyword">var</span> mainContent = $(<span class="hljs-string">'#cnblogs_post_body'</span>);

<span class="hljs-keyword">var</span> h2_list = $(<span class="hljs-string">'#cnblogs_post_body h2'</span>);<span class="hljs-comment">//如果你的章节标题不是h2,只需要将这里的h2换掉即可</span>

<span class="hljs-keyword">if</span>(mainContent.length < <span class="hljs-number">1</span>)

<span class="hljs-keyword">return</span>;

<span class="hljs-keyword">if</span>(h2_list.length><span class="hljs-number">0</span>)

{

<span class="hljs-keyword">var</span> content = <span class="hljs-string">'<a name="_labelTop"></a>'</span>;

content += <span class="hljs-string">'<div id="navCategory" style="color:#152e97;">'</span>;

content += <span class="hljs-string">'<p style="font-size:18px;"><b>目录</b></p>'</span>;

content += <span class="hljs-string">'<ul>'</span>;

<span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i=<span class="hljs-number">0</span>; i<h2_list.length; i++)

{

<span class="hljs-keyword">var</span> go_to_top = <span class="hljs-string">'<div style="text-align: right;"><a href="#_labelTop" style="color:#f68a33">回到顶部</a><a name="_label'</span> + i + <span class="hljs-string">'"></a></div>'</span>;

$(h2_list[i]).before(go_to_top);

<span class="hljs-keyword">var</span> h3_list = $(h2_list[i]).nextAll(<span class="hljs-string">"h3"</span>);

<span class="hljs-keyword">var</span> li3_content = <span class="hljs-string">''</span>;

<span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> j=<span class="hljs-number">0</span>; j<h3_list.length; j++)

{

<span class="hljs-keyword">var</span> tmp = $(h3_list[j]).prevAll(<span class="hljs-string">'h2'</span>).first();

<span class="hljs-keyword">if</span>(!tmp.is(h2_list[i]))

<span class="hljs-keyword">break</span>;

<span class="hljs-keyword">var</span> li3_anchor = <span class="hljs-string">'<a name="_label'</span> + i + <span class="hljs-string">'_'</span> + j + <span class="hljs-string">'"></a>'</span>;

$(h3_list[j]).before(li3_anchor);

li3_content += <span class="hljs-string">'<li><a href="#_label'</span> + i + <span class="hljs-string">'_'</span> + j + <span class="hljs-string">'">'</span> + $(h3_list[j]).text() + <span class="hljs-string">'</a></li>'</span>;

}

<span class="hljs-keyword">var</span> li2_content = <span class="hljs-string">''</span>;

<span class="hljs-keyword">if</span>(li3_content.length > <span class="hljs-number">0</span>)

li2_content = <span class="hljs-string">'<li><a href="#_label'</span> + i + <span class="hljs-string">'">'</span> + $(h2_list[i]).text() + <span class="hljs-string">'</a><ul>'</span> + li3_content + <span class="hljs-string">'</ul></li>'</span>;

li2_content = <span class="hljs-string">'<li><a href="#_label'</span> + i + <span class="hljs-string">'">'</span> + $(h2_list[i]).text() + <span class="hljs-string">'</a></li>'</span>;

content += li2_content;

}

content += <span class="hljs-string">'</ul>'</span>;

content += <span class="hljs-string">'</div><p>&nbsp;</p>'</span>;

content += <span class="hljs-string">'<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>'</span>;

<span class="hljs-keyword">if</span>($(<span class="hljs-string">'#cnblogs_post_body'</span>).length != <span class="hljs-number">0</span> )

{

$($(<span class="hljs-string">'#cnblogs_post_body'</span>)[<span class="hljs-number">0</span>]).prepend(content);

}

GenerateContentList();

</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>

</code></pre>

<a name="_label0_2"></a><h3 id="blogTitle3">3. 按格式写文章</h3>

<p>在写新博文的时候，注意按照你js脚本里设定的格式来划分章节（这里只设定了h2,h3，对应普通编辑器中的二级标题和三级标题，对应markdown中的##和###）。当然，以前发布的文章如果有h2,h3，也会自动生成目录索引。<br>

效果如下：<br>

<div style="text-align: right;"><a href="#_labelTop" style="color:#f68a33">回到顶部</a><a name="_label1"></a></div><h2 id="blogTitle4">第二种：在文章右上角添加目录导航</h2>

<a name="_label1_0"></a><h3 id="blogTitle5">1. 申请开通js权限</h3>

<a name="_label1_1"></a><h3 id="blogTitle6">2. 添加css代码到"页面定制CSS代码"</h3>

<pre><code class="hljs scss"><span class="hljs-comment">/*生成博客目录的CSS*/</span>

<span class="hljs-selector-id">#uprightsideBar</span>{

<span class="hljs-attribute">font-size</span>:<span class="hljs-number">12px</span>;

<span class="hljs-attribute">font-family</span>:Arial, Helvetica, sans-serif;

<span class="hljs-attribute">text-align</span>:left;

<span class="hljs-attribute">position</span>:fixed;<span class="hljs-comment">/*将div的位置固定到距离top:50px，right:0px的位置，这样div就会处在最右边的位置，距离顶部50px*/</span>

<span class="hljs-attribute">top</span>:<span class="hljs-number">50px</span>;

<span class="hljs-attribute">right</span>:<span class="hljs-number">0px</span>;

<span class="hljs-attribute">width</span>: auto;

<span class="hljs-attribute">height</span>: auto;

}

<span class="hljs-selector-id">#sideBarTab</span>{

<span class="hljs-attribute">float</span>:left;

<span class="hljs-attribute">width</span>:<span class="hljs-number">30px</span>;

<span class="hljs-attribute">border</span>:<span class="hljs-number">1px</span> solid <span class="hljs-number">#e5e5e5</span>;

<span class="hljs-attribute">border-right</span>:none;

<span class="hljs-attribute">text-align</span>:center;

<span class="hljs-attribute">background</span>:<span class="hljs-number">#ffffff</span>;

}

<span class="hljs-selector-id">#sideBarContents</span>{

<span class="hljs-attribute">float</span>:left;

<span class="hljs-attribute">overflow</span>:auto;

<span class="hljs-attribute">overflow-x</span>:hidden;!important;

<span class="hljs-attribute">width</span>:<span class="hljs-number">200px</span>;

<span class="hljs-attribute">min-height</span>:<span class="hljs-number">108px</span>;

<span class="hljs-attribute">max-height</span>:<span class="hljs-number">460px</span>;

<span class="hljs-attribute">border</span>:<span class="hljs-number">1px</span> solid <span class="hljs-number">#e5e5e5</span>;

<span class="hljs-attribute">border-right</span>:none;

<span class="hljs-attribute">background</span>:<span class="hljs-number">#ffffff</span>;

}

<span class="hljs-selector-id">#sideBarContents</span> <span class="hljs-selector-tag">dl</span>{

<span class="hljs-attribute">margin</span>:<span class="hljs-number">0</span>;

<span class="hljs-attribute">padding</span>:<span class="hljs-number">0</span>;

}

<span class="hljs-selector-id">#sideBarContents</span> <span class="hljs-selector-tag">dt</span>{

<span class="hljs-attribute">margin-top</span>:<span class="hljs-number">5px</span>;

<span class="hljs-attribute">margin-left</span>:<span class="hljs-number">5px</span>;

}

<span class="hljs-selector-id">#sideBarContents</span> <span class="hljs-selector-tag">dd</span>, <span class="hljs-selector-tag">dt</span> {

<span class="hljs-attribute">cursor</span>: pointer;

}

<span class="hljs-selector-id">#sideBarContents</span> <span class="hljs-selector-tag">dd</span>:hover, <span class="hljs-selector-tag">dt</span>:hover {

<span class="hljs-attribute">color</span>:<span class="hljs-number">#A7995A</span>;

}

<span class="hljs-selector-id">#sideBarContents</span> <span class="hljs-selector-tag">dd</span>{

<span class="hljs-attribute">margin-left</span>:<span class="hljs-number">20px</span>;

}

</code></pre>

<a name="_label1_2"></a><h3 id="blogTitle7">3. 添加js脚本到"页首Html代码"</h3>

<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>></span><span class="javascript">

<span class="hljs-comment">/*

功能：生成博客目录的JS工具

测试：IE8，火狐，google测试通过

孤傲苍狼

2014-5-11

*/</span>

<span class="hljs-keyword">var</span> BlogDirectory = {

<span class="hljs-comment">/*

获取元素位置，距浏览器左边界的距离（left）和距浏览器上边界的距离（top）

*/</span>

getElementPosition:<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">ele</span>) </span>{

<span class="hljs-keyword">var</span> topPosition = <span class="hljs-number">0</span>;

<span class="hljs-keyword">var</span> leftPosition = <span class="hljs-number">0</span>;

<span class="hljs-keyword">while</span> (ele){

topPosition += ele.offsetTop;

leftPosition += ele.offsetLeft;

ele = ele.offsetParent;

}

<span class="hljs-keyword">return</span> {<span class="hljs-attr">top</span>:topPosition, <span class="hljs-attr">left</span>:leftPosition};

<span class="hljs-comment">/*

获取滚动条当前位置

*/</span>

getScrollBarPosition:<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{

<span class="hljs-keyword">var</span> scrollBarPosition = <span class="hljs-built_in">document</span>.body.scrollTop || <span class="hljs-built_in">document</span>.documentElement.scrollTop;

<span class="hljs-keyword">return</span> scrollBarPosition;

<span class="hljs-comment">/*

移动滚动条，finalPos 为目的位置，internal 为移动速度

*/</span>

moveScrollBar:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">finalpos, interval</span>) </span>{

<span class="hljs-comment">//若不支持此方法，则退出</span>

<span class="hljs-keyword">if</span>(!<span class="hljs-built_in">window</span>.scrollTo) {

<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;

}

<span class="hljs-comment">//窗体滚动时，禁用鼠标滚轮</span>

<span class="hljs-built_in">window</span>.onmousewheel = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{

<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;

};

<span class="hljs-keyword">if</span> (<span class="hljs-built_in">document</span>.body.movement) {

clearTimeout(<span class="hljs-built_in">document</span>.body.movement);

}

<span class="hljs-keyword">var</span> currentpos =BlogDirectory.getScrollBarPosition();<span class="hljs-comment">//获取滚动条当前位置</span>

<span class="hljs-keyword">var</span> dist = <span class="hljs-number">0</span>;

<span class="hljs-keyword">if</span> (currentpos == finalpos) {<span class="hljs-comment">//到达预定位置，则解禁鼠标滚轮，并退出</span>

<span class="hljs-built_in">window</span>.onmousewheel = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{

<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;

}

<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;

}

<span class="hljs-keyword">if</span> (currentpos < finalpos) {<span class="hljs-comment">//未到达，则计算下一步所要移动的距离</span>

dist = <span class="hljs-built_in">Math</span>.ceil((finalpos - currentpos)/<span class="hljs-number">10</span>);

currentpos += dist;

}

<span class="hljs-keyword">if</span> (currentpos > finalpos) {

dist = <span class="hljs-built_in">Math</span>.ceil((currentpos - finalpos)/<span class="hljs-number">10</span>);

currentpos -= dist;

}

<span class="hljs-keyword">var</span> scrTop = BlogDirectory.getScrollBarPosition();<span class="hljs-comment">//获取滚动条当前位置</span>

<span class="hljs-built_in">window</span>.scrollTo(<span class="hljs-number">0</span>, currentpos);<span class="hljs-comment">//移动窗口</span>

<span class="hljs-keyword">if</span>(BlogDirectory.getScrollBarPosition() == scrTop)<span class="hljs-comment">//若已到底部，则解禁鼠标滚轮，并退出</span>

{

<span class="hljs-built_in">window</span>.onmousewheel = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{

<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;

}

<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;

}

<span class="hljs-comment">//进行下一步移动</span>

<span class="hljs-keyword">var</span> repeat = <span class="hljs-string">"BlogDirectory.moveScrollBar("</span> + finalpos + <span class="hljs-string">","</span> + interval + <span class="hljs-string">")"</span>;

<span class="hljs-built_in">document</span>.body.movement = setTimeout(repeat, interval);

<span class="hljs-attr">htmlDecode</span>:<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">text</span>)</span>{

<span class="hljs-keyword">var</span> temp = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">"div"</span>);

temp.innerHTML = text;

<span class="hljs-keyword">var</span> output = temp.innerText || temp.textContent;

temp = <span class="hljs-literal">null</span>;

<span class="hljs-keyword">return</span> output;

<span class="hljs-comment">/*

创建博客目录，

id表示包含博文正文的 div 容器的 id，

mt 和 st 分别表示主标题和次级标题的标签名称（如 H2、H3，大写或小写都可以！），

interval 表示移动的速度

*/</span>

createBlogDirectory:<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">id, mt, st, interval</span>)</span>{

<span class="hljs-comment">//获取博文正文div容器</span>

<span class="hljs-keyword">var</span> elem = <span class="hljs-built_in">document</span>.getElementById(id);

<span class="hljs-keyword">if</span>(!elem) <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;

<span class="hljs-comment">//获取div中所有元素结点</span>

<span class="hljs-keyword">var</span> nodes = elem.getElementsByTagName(<span class="hljs-string">"*"</span>);

<span class="hljs-comment">//创建博客目录的div容器</span>

<span class="hljs-keyword">var</span> divSideBar = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">'DIV'</span>);

divSideBar.className = <span class="hljs-string">'uprightsideBar'</span>;

divSideBar.setAttribute(<span class="hljs-string">'id'</span>, <span class="hljs-string">'uprightsideBar'</span>);

<span class="hljs-keyword">var</span> divSideBarTab = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">'DIV'</span>);

divSideBarTab.setAttribute(<span class="hljs-string">'id'</span>, <span class="hljs-string">'sideBarTab'</span>);

divSideBar.appendChild(divSideBarTab);

<span class="hljs-keyword">var</span> h2 = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">'H2'</span>);

divSideBarTab.appendChild(h2);

<span class="hljs-keyword">var</span> txt = <span class="hljs-built_in">document</span>.createTextNode(<span class="hljs-string">'目录导航'</span>);

h2.appendChild(txt);

<span class="hljs-keyword">var</span> divSideBarContents = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">'DIV'</span>);

divSideBarContents.style.display = <span class="hljs-string">'none'</span>;

divSideBarContents.setAttribute(<span class="hljs-string">'id'</span>, <span class="hljs-string">'sideBarContents'</span>);

divSideBar.appendChild(divSideBarContents);

<span class="hljs-comment">//创建自定义列表</span>

<span class="hljs-keyword">var</span> dlist = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">"dl"</span>);

divSideBarContents.appendChild(dlist);

<span class="hljs-keyword">var</span> num = <span class="hljs-number">0</span>;<span class="hljs-comment">//统计找到的mt和st</span>

mt = mt.toUpperCase();<span class="hljs-comment">//转化成大写</span>

st = st.toUpperCase();<span class="hljs-comment">//转化成大写</span>

<span class="hljs-comment">//遍历所有元素结点</span>

<span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i=<span class="hljs-number">0</span>; i<nodes.length; i++)

{

<span class="hljs-keyword">if</span>(nodes[i].nodeName == mt|| nodes[i].nodeName == st)

{

<span class="hljs-comment">//获取标题文本</span>

<span class="hljs-keyword">var</span> nodetext = nodes[i].innerHTML.replace(<span class="hljs-regexp">/<\/?[^>]+>/g</span>,<span class="hljs-string">""</span>);<span class="hljs-comment">//innerHTML里面的内容可能有HTML标签，所以用正则表达式去除HTML的标签</span>

nodetext = nodetext.replace(<span class="hljs-regexp">/ /ig</span>, <span class="hljs-string">""</span>);<span class="hljs-comment">//替换掉所有的 </span>

nodetext = BlogDirectory.htmlDecode(nodetext);

nodes[i].setAttribute(<span class="hljs-string">"id"</span>, <span class="hljs-string">"blogTitle"</span> + num);

<span class="hljs-keyword">var</span> item;

<span class="hljs-keyword">switch</span>(nodes[i].nodeName)

{

<span class="hljs-keyword">case</span> mt: <span class="hljs-comment">//若为主标题 </span>

item = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">"dt"</span>);

<span class="hljs-keyword">break</span>;

<span class="hljs-keyword">case</span> st: <span class="hljs-comment">//若为子标题</span>

item = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">"dd"</span>);

<span class="hljs-keyword">break</span>;

}

<span class="hljs-comment">//创建锚链接</span>

<span class="hljs-keyword">var</span> itemtext = <span class="hljs-built_in">document</span>.createTextNode(nodetext);

item.appendChild(itemtext);

item.setAttribute(<span class="hljs-string">"name"</span>, num);

item.onclick = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-comment">//添加鼠标点击触发函数</span>

<span class="hljs-keyword">var</span> pos = BlogDirectory.getElementPosition(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"blogTitle"</span> + <span class="hljs-keyword">this</span>.getAttribute(<span class="hljs-string">"name"</span>)));

<span class="hljs-keyword">if</span>(!BlogDirectory.moveScrollBar(pos.top, interval)) <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;

};

<span class="hljs-comment">//将自定义表项加入自定义列表中</span>

dlist.appendChild(item);

num++;

}

<span class="hljs-keyword">if</span>(num == <span class="hljs-number">0</span>) <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;

<span class="hljs-comment">/*鼠标进入时的事件处理*/</span>

divSideBarTab.onmouseenter = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{

divSideBarContents.style.display = <span class="hljs-string">'block'</span>;

}

<span class="hljs-comment">/*鼠标离开时的事件处理*/</span>

divSideBar.onmouseleave = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{

divSideBarContents.style.display = <span class="hljs-string">'none'</span>;

}

<span class="hljs-built_in">document</span>.body.appendChild(divSideBar);

}

};

<span class="hljs-built_in">window</span>.onload=<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{

<span class="hljs-comment">/*页面加载完成之后生成博客目录*/</span>

BlogDirectory.createBlogDirectory(<span class="hljs-string">"cnblogs_post_body"</span>,<span class="hljs-string">"h2"</span>,<span class="hljs-string">"h3"</span>,<span class="hljs-number">20</span>);

}

</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>

</code></pre>

<a name="_label1_3"></a><h3 id="blogTitle8">4. 按格式写文章</h3>

效果如下：<br>

</div>

分类:

</div>

</div>

</div>

</div>

</div>

</div>

currentDiggType = 0;

</script></div>

<a href="https://www.cnblogs.com/xuehaoyue/p/6639029.html" class="p_n_p_prefix">« </a> 上一篇： <a href="https://www.cnblogs.com/xuehaoyue/p/6639029.html" title="发布于 2017-03-29 11:47">分块编码（Transfer-Encoding: chunked）</a>

<br>

<a href="https://www.cnblogs.com/xuehaoyue/p/6652900.html" class="p_n_p_prefix">» </a> 下一篇： <a href="https://www.cnblogs.com/xuehaoyue/p/6652900.html" title="发布于 2017-03-31 18:56">动态规划（一）：矩阵取数问题</a>

</div>

<div class="postDesc">posted @

阅读(<span id="post_view_count">6114</span>) 

评论(<span id="post_comment_count">14</span>) 

</div>

</div>

</div>

var allowComments = true, cb_blogId = 329862, cb_blogApp = 'xuehaoyue', cb_blogUserGuid = 'fdceac23-09e7-e611-845c-ac853d9f53ac';

var cb_entryId = 6650533, cb_entryCreatedDate = '2017-03-31 11:40', cb_postType = 1;

loadViewCount(cb_entryId);

loadSideColumnAd();

</script><a name="!comments"></a>

</div>

<br>

</div>

</a>

引用

</a>

</span>

</div>

<a id="a_comment_author_3895543" href="https://www.cnblogs.com/mukekeheart/" target="_blank">mukekeheart</a>

</div>

请问下如何设置字体大小呢

</div>

支持(0)

</a>

反对(0)

</a>

</div>

https://pic.cnblogs.com/face/926487/20180313105754.png

</span>

</div>

</a>

引用

</a>

</span>

</div>

<a id="a_comment_author_3900552" href="https://www.cnblogs.com/houhaibushihai/" target="_blank">houhaibushihai</a>

</div>

首先感谢🙏博主的分享！不过遇到点儿问题：<br>1.目录中的单词间没有空格符，很不便于阅读目录。<img src="//images2017.cnblogs.com/blog/605033/201801/605033-20180130174558593-1118627616.png" alt="" border="0" "=""><br>2.怎么增加多级标题？我是用markdown编辑文件，使用的目录级数比较多。

</div>

支持(0)

</a>

反对(0)

</a>

</div>

https://pic.cnblogs.com/face/605033/20181215204618.png

</span>

</div>

</a>

引用

</a>

</span>

</div>

<a id="a_comment_author_3944601" href="https://www.cnblogs.com/fqh202/" target="_blank">方淇韩FrankFang</a>

</div>

多谢!

</div>

支持(0)

</a>

反对(0)

</a>

</div>

https://pic.cnblogs.com/face/1304861/20191114115633.png

</span>

</div>

</a>

引用

</a>

</span>

</div>

</div>

好难哦小白表示这么麻烦呀

</div>

支持(1)

</a>

反对(0)

</a>

</div>

https://pic.cnblogs.com/face/1460190/20180807221402.png

</span>

</div>

</a>

引用

</a>

</span>

</div>

</div>

感谢

</div>

支持(0)

</a>

反对(0)

</a>

</div>

https://pic.cnblogs.com/face/1060173/20180228104318.png

</span>

</div>

</a>

引用

</a>

</span>

</div>

</div>

可以的, 很不错, 感谢

</div>

支持(0)

</a>

反对(0)

</a>

</div>

https://pic.cnblogs.com/face/1094855/20190912095625.png

</span>

</div>

</a>

引用

</a>

</span>

</div>

</div>

good

</div>

支持(0)

</a>

反对(0)

</a>

</div>

</a>

引用

</a>

</span>

</div>

</div>

右上角的目录导航怎么突然不能用了呢？？？？

</div>

支持(0)

</a>

反对(0)

</a>

</div>

</a>

引用

</a>

</span>

</div>

<a id="a_comment_author_4299628" href="https://www.cnblogs.com/yang-biji/" target="_blank">四月二十二</a>

</div>

博客园的背景有毒，我使用这个方法的时候，没有显示成功，审查元素的时候发现，这个右上角的目录框是存在的，但是被背景盖住了，所以没有显示<br>我一开始用的是一个水墨的那个，现在换成这篇博客一样的背景了，现在能显示了

</div>

支持(0)

</a>

反对(0)

</a>

</div>

</a>

引用

</a>

</span>

</div>

</div>

我想在加一级怎么办呢

</div>

支持(1)

</a>

反对(0)

</a>

</div>

https://pic.cnblogs.com/face/1351857/20190529113516.png

</span>

</div>

</a>

引用

</a>

</span>

</div>

</div>

<p>请问老哥如何实现目录瞬间跳转？这样跳转时间太慢了</p>

</div>

支持(0)

</a>

反对(0)

</a>

</div>

https://pic.cnblogs.com/face/1928790/20200712181005.png

</span>

</div>

</a>

引用

</a>

</span>

</div>

</div>

<p>请问第一种怎么设置格式？我按照上面步骤做完，可是还是不知道怎么把目录和正文标题链接到一起</p>

</div>

支持(0)

</a>

反对(0)

</a>

</div>

https://pic.cnblogs.com/face/1790388/20190908134559.png

</span>

</div>

</a>

引用

</a>

</span>

</div>

<a id="a_comment_author_4551659" href="https://home.cnblogs.com/u/1997940/" target="_blank">INnnn</a>

</div>

</div>

支持(0)

</a>

反对(0)

</a>

</div>

</div>

var commentManager = new blogCommentManager();

commentManager.renderComments(0);

</script>

</div>

</g>

</svg>

</span>

</g>

</svg>

</span>

</g>

</g>

</g>

</svg>

</span>

</g>

</svg>

</span>

</g>

</svg>

</span>

</div>

</div>

</div>

<a class="comment_option">Markdown 帮助</a>

</span>

</div>

</p>

<p>[Ctrl+Enter快捷键提交]</p>

</div>

</div>

</div>

<b>最新 IT 新闻</b>:

<br>

· <a href="//news.cnblogs.com/n/671065/" target="_blank">百度和滴滴必有一战</a>

<br>

· <a href="//news.cnblogs.com/n/671064/" target="_blank">优酷升级分账规则，网络电影到了"紧要关头"？</a>

<br>

· <a href="//news.cnblogs.com/n/671063/" target="_blank">拼多多和特斯拉没有双赢</a>

<br>

· <a href="//news.cnblogs.com/n/671062/" target="_blank">趣店、乐信：互金路上同路不同命</a>

<br>

· <a href="//news.cnblogs.com/n/671061/" target="_blank">雷军的小米十年：真心话、笑话，Are you OK？</a>

<br>

» <a href="https://news.cnblogs.com/" title="IT 新闻" target="_blank">更多新闻...</a>

</div></div>

fixPostBody();

deliverBigBanner();

setTimeout(function() { incrementViewCount(cb_entryId); }, 50); deliverT2();

deliverC1C2();

loadNewsAndKb();

loadBlogSignature();

LoadPostCategoriesTags(cb_blogId, cb_entryId); LoadPostInfoBlock(cb_blogId, cb_entryId, cb_blogApp, cb_blogUserGuid);

GetPrevNextPost(cb_entryId, cb_blogId, cb_entryCreatedDate, cb_postType);

loadOptUnderPost();

GetHistoryToday(cb_blogId, cb_blogApp, cb_entryCreatedDate);

</script>

</div>

</div>

</div>

昵称：

妙音天女

</a>

<br>

园龄：

3年6个月

</a>

<br>

粉丝：

</a>

<br>

关注：

</a>

</div>

<tbody>

<tr>

<tbody>

<tr>

</td>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

<tr>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</td>

</td>

</td>

</td>

</td>

</td>

</tr>

<tr>

</td>

</td>

</td>

</td>

</td>

</td>

</td>

</tr>

<tr>

</td>

</td>

</td>

</td>

</td>

</td>

</td>

</tr>

<tr>

</td>

</td>

</td>

</td>

</td>

</td>

</td>

</tr>

<tr>

</td>

</td>

</td>

</td>

</td>

</td>

</td>

</tr>

</tbody>

</table></div><script>loadBlogDefaultCalendar();</script>

</div>

</div>

常用链接

</h3>

<ul>

</ul>

</div>

<ul>

<li>

<a href="https://www.cnblogs.com/xuehaoyue/p/10045730.html">1.省市区县街道四级联动下拉菜单</a>

</li>

<li>

<a href="https://www.cnblogs.com/xuehaoyue/p/9964475.html">2.用原生JS实现多张图片上传及预览功能（兼容IE8）</a>

</li>

<li>

<a href="https://www.cnblogs.com/xuehaoyue/p/7491264.html">3.移动端滚动的橡皮筋问题</a>

</li>

<li>

<a href="https://www.cnblogs.com/xuehaoyue/p/7172053.html">4.懒加载和预加载</a>

</li>

<li>

<a href="https://www.cnblogs.com/xuehaoyue/p/6986779.html">5.将通过<input type="file">上传的txt文件存储在localStorage，提取并构建File对象</a>

</li>

<li>

<a href="https://www.cnblogs.com/xuehaoyue/p/6978810.html">6.jQuery Ajax使用FormData上传文件和其他数据，后端web.py获取</a>

</li>

<li>

<a href="https://www.cnblogs.com/xuehaoyue/p/6978374.html">7.bootstrap改变上传文件按钮样式，并显示已上传文件名</a>

</li>

<li>

<a href="https://www.cnblogs.com/xuehaoyue/p/6660315.html">8.整数的分解方法</a>

</li>

<li>

<a href="https://www.cnblogs.com/xuehaoyue/p/6657190.html">9.#1490 : Tree Restoration</a>

</li>

<li>

<a href="https://www.cnblogs.com/xuehaoyue/p/6652900.html">10.动态规划（一）：矩阵取数问题</a>

</li>

</ul>

</div>

<ul>

<li>

<a href="https://www.cnblogs.com/xuehaoyue/tag/URL/">URL</a>(4)

</li>

<li>

<a href="https://www.cnblogs.com/xuehaoyue/tag/%E4%B8%8D%E4%BC%9A/">不会</a>(2)

</li>

<li>

<a href="https://www.cnblogs.com/xuehaoyue/tag/%E4%B8%8D%E6%98%8E%E7%99%BD%E4%B8%BA%E4%BD%95%E4%B8%8D%E9%80%9A%E8%BF%87/">不明白为何不通过</a>(2)

</li>

</ul>

</div>

<h3 class="catListTitle">积分与排名</h3>

<ul>

积分 -

40757

</li>

排名 -

22332

</li>

</ul>

</div>

随笔分类

</h3>

<ul>

<li>

HTTP(9)

</a>

</li>

<li>

LeetCode(13)

</a>

</li>

<li>

笔试算法题(2)

</a>

</li>

<li>

常见算法问题(1)

</a>

</li>

<li>

工具(2)

</a>

</li>

<li>

前端(12)

</a>

</li>

<li>

全栈(1)

</a>

</li>

</ul>

</div>

随笔档案

</h3>

<ul>

<li>

2018年11月(2)

</a>

</li>

<li>

2017年9月(1)

</a>

</li>

<li>

2017年7月(1)

</a>

</li>

<li>

2017年6月(3)

</a>

</li>

<li>

2017年4月(2)

</a>

</li>

<li>

2017年3月(17)

</a>

</li>

<li>

2017年2月(14)

</a>

</li>

</ul>

</div>

文章分类

</h3>

<ul>

<li>

工具(1)

</a>

</li>

</ul>

</div>

文章档案

</h3>

<ul>

<li>

2017年3月(1)

</a>

</li>

</ul>

</div>

<ul>

<li class="recent_comment_title"><a href="https://www.cnblogs.com/xuehaoyue/p/6650533.html">1. Re:为博客园添加目录的方法总结</a></li>

</li>

<li class="recent_comment_author">--INnnn</li>

<li class="recent_comment_title"><a href="https://www.cnblogs.com/xuehaoyue/p/6650533.html">2. Re:为博客园添加目录的方法总结</a></li>

<li class="recent_comment_body"><p>请问第一种怎么设置格式？我按照上面步骤做完，可是还是不知道怎么把目录和正文标题链接到一起</p>

</li>

<li class="recent_comment_title"><a href="https://www.cnblogs.com/xuehaoyue/p/6650533.html">3. Re:为博客园添加目录的方法总结</a></li>

<li class="recent_comment_body"><p>请问老哥如何实现目录瞬间跳转？这样跳转时间太慢了</p>

</li>

<li class="recent_comment_title"><a href="https://www.cnblogs.com/xuehaoyue/p/6549682.html">4. Re:canvas的beginPath和closePath分析总结，包括多段弧的情况</a></li>

<li class="recent_comment_body"><p>非常棒的测试例子</p>

</li>

<li class="recent_comment_author">--几只强心剂</li>

<li class="recent_comment_title"><a href="https://www.cnblogs.com/xuehaoyue/p/6639029.html">5. Re:分块编码（Transfer-Encoding: chunked）</a></li>

<li class="recent_comment_body">你好，我看了一下例子，'This is the data in the first chunk'是35字节，16进制的25换算过来是37字节，第二个例子也是这样。1c表示28，但是'and this ...</li>

<li class="recent_comment_author">--lemon_juice</li>

</ul>

</div>

<h3 class="catListTitle">阅读排行榜</h3>

<li>

1. webpack和webpack-dev-server安装配置（遇到各种问题的解决方法）(63727)

</a>

</li>

<li>

2. 分块编码（Transfer-Encoding: chunked）(30943)

</a>

</li>

<li>

3. bootstrap改变上传文件按钮样式，并显示已上传文件名(15151)

</a>

</li>

<li>

4. jQuery Ajax使用FormData上传文件和其他数据，后端web.py获取(12126)

</a>

</li>

<li>

5. 为博客园添加目录的方法总结(6114)

</a>

</li>

</ul>

</div>

<h3 class="catListTitle">评论排行榜</h3>

<li>

1. webpack和webpack-dev-server安装配置（遇到各种问题的解决方法）(28)

</a>

</li>

<li>

2. 为博客园添加目录的方法总结(14)

</a>

</li>

<li>

3. bootstrap改变上传文件按钮样式，并显示已上传文件名(3)

</a>

</li>

<li>

4. 分块编码（Transfer-Encoding: chunked）(3)

</a>

</li>

<li>

5. 总结get和post区别(3)

</a>

</li>

</ul>

</div>

<h3 class="catListTitle">推荐排行榜</h3>

<li>

1. 为博客园添加目录的方法总结(24)

</a>

</li>

<li>

2. canvas的beginPath和closePath分析总结，包括多段弧的情况(6)

</a>

</li>

<li>

3. 分块编码（Transfer-Encoding: chunked）(4)

</a>

</li>

<li>

4. webpack和webpack-dev-server安装配置（遇到各种问题的解决方法）(4)

</a>

</li>

<li>

5. 正则表达式(2)

</a>

</li>

</ul>

</div>

</div></div>

</div>

</div>

</div>

</div>

<br><span id="poweredby">Powered by .NET Core on Kubernetes</span>

</div>

</div>

// 生成目录索引列表

// ref: http://www.cnblogs.com/wangqiguo/p/4355032.html

// modified by: zzq

function GenerateContentList()

{

var mainContent = $('#cnblogs_post_body');

var h2_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h2,只需要将这里的h2换掉即可

if(mainContent.length < 1)

return;

if(h2_list.length>0)

{

var content = '<a name="_labelTop"></a>';

content += '<div id="navCategory" style="color:#152e97;">';

content += '<p style="font-size:18px;"><b>目录</b></p>';

content += '<ul>';

for(var i=0; i<h2_list.length; i++)

{

var go_to_top = '<div style="text-align: right;"><a href="#_labelTop" style="color:#f68a33">回到顶部</a><a name="_label' + i + '"></a></div>';

$(h2_list[i]).before(go_to_top);

var h3_list = $(h2_list[i]).nextAll("h3");

var li3_content = '';

for(var j=0; j<h3_list.length; j++)

{

var tmp = $(h3_list[j]).prevAll('h2').first();

if(!tmp.is(h2_list[i]))

break;

var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';

$(h3_list[j]).before(li3_anchor);

li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>';

}

var li2_content = '';

if(li3_content.length > 0)

li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';

else

li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';

content += li2_content;

}

content += '</ul>';

content += '</div><p> </p>';

content += '<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>';

if($('#cnblogs_post_body').length != 0 )

{

$($('#cnblogs_post_body')[0]).prepend(content);

}

GenerateContentList();

</script>

</div>

功能：生成博客目录的JS工具

测试：IE8，火狐，google测试通过

孤傲苍狼

2014-5-11

var BlogDirectory = {

获取元素位置，距浏览器左边界的距离（left）和距浏览器上边界的距离（top）

getElementPosition:function (ele) {

var topPosition = 0;

var leftPosition = 0;

while (ele){

topPosition += ele.offsetTop;

leftPosition += ele.offsetLeft;

ele = ele.offsetParent;

}

return {top:topPosition, left:leftPosition};

获取滚动条当前位置

getScrollBarPosition:function () {

var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop;

return scrollBarPosition;

移动滚动条，finalPos 为目的位置，internal 为移动速度

moveScrollBar:function(finalpos, interval) {

//若不支持此方法，则退出

if(!window.scrollTo) {

return false;

}

//窗体滚动时，禁用鼠标滚轮

window.onmousewheel = function(){

return false;

};

//清除计时

if (document.body.movement) {

clearTimeout(document.body.movement);

}

var currentpos =BlogDirectory.getScrollBarPosition();//获取滚动条当前位置

var dist = 0;

if (currentpos == finalpos) {//到达预定位置，则解禁鼠标滚轮，并退出

window.onmousewheel = function(){

return true;

}

return true;

}

if (currentpos < finalpos) {//未到达，则计算下一步所要移动的距离

dist = Math.ceil((finalpos - currentpos)/10);

currentpos += dist;

}

if (currentpos > finalpos) {

dist = Math.ceil((currentpos - finalpos)/10);

currentpos -= dist;

}

var scrTop = BlogDirectory.getScrollBarPosition();//获取滚动条当前位置

window.scrollTo(0, currentpos);//移动窗口

if(BlogDirectory.getScrollBarPosition() == scrTop)//若已到底部，则解禁鼠标滚轮，并退出

{

window.onmousewheel = function(){

return true;

}

return true;

}

//进行下一步移动

var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")";

document.body.movement = setTimeout(repeat, interval);

htmlDecode:function (text){

var temp = document.createElement("div");

temp.innerHTML = text;

var output = temp.innerText || temp.textContent;

temp = null;

return output;

创建博客目录，

id表示包含博文正文的 div 容器的 id，

mt 和 st 分别表示主标题和次级标题的标签名称（如 H2、H3，大写或小写都可以！），

interval 表示移动的速度

createBlogDirectory:function (id, mt, st, interval){

//获取博文正文div容器

var elem = document.getElementById(id);

if(!elem) return false;

//获取div中所有元素结点

var nodes = elem.getElementsByTagName("*");

//创建博客目录的div容器

var divSideBar = document.createElement('DIV');

divSideBar.className = 'uprightsideBar';

divSideBar.setAttribute('id', 'uprightsideBar');

var divSideBarTab = document.createElement('DIV');

divSideBarTab.setAttribute('id', 'sideBarTab');

divSideBar.appendChild(divSideBarTab);

var h2 = document.createElement('H2');

divSideBarTab.appendChild(h2);

var txt = document.createTextNode('目录导航');

h2.appendChild(txt);

var divSideBarContents = document.createElement('DIV');

divSideBarContents.style.display = 'none';

divSideBarContents.setAttribute('id', 'sideBarContents');

divSideBar.appendChild(divSideBarContents);

//创建自定义列表

var dlist = document.createElement("dl");

divSideBarContents.appendChild(dlist);

var num = 0;//统计找到的mt和st

mt = mt.toUpperCase();//转化成大写

st = st.toUpperCase();//转化成大写

//遍历所有元素结点

for(var i=0; i<nodes.length; i++)

{

if(nodes[i].nodeName == mt|| nodes[i].nodeName == st)

{

//获取标题文本

var nodetext = nodes[i].innerHTML.replace(/<\/?[^>]+>/g,"");//innerHTML里面的内容可能有HTML标签，所以用正则表达式去除HTML的标签

nodetext = nodetext.replace(/ /ig, "");//替换掉所有的 

nodetext = BlogDirectory.htmlDecode(nodetext);

//插入锚

nodes[i].setAttribute("id", "blogTitle" + num);

var item;

switch(nodes[i].nodeName)

{

case mt: //若为主标题

item = document.createElement("dt");

break;

case st: //若为子标题

item = document.createElement("dd");

break;

}

//创建锚链接

var itemtext = document.createTextNode(nodetext);

item.appendChild(itemtext);

item.setAttribute("name", num);

item.onclick = function(){ //添加鼠标点击触发函数

var pos = BlogDirectory.getElementPosition(document.getElementById("blogTitle" + this.getAttribute("name")));

if(!BlogDirectory.moveScrollBar(pos.top, interval)) return false;

};

//将自定义表项加入自定义列表中

dlist.appendChild(item);

num++;

}

if(num == 0) return false;

/*鼠标进入时的事件处理*/

divSideBarTab.onmouseenter = function(){

divSideBarContents.style.display = 'block';

}

/*鼠标离开时的事件处理*/

divSideBar.onmouseleave = function() {

divSideBarContents.style.display = 'none';

}

document.body.appendChild(divSideBar);

}

};

window.onload=function(){

/*页面加载完成之后生成博客目录*/

BlogDirectory.createBlogDirectory("cnblogs_post_body","h2","h3",20);

}

</script><div class="uprightsideBar" id="uprightsideBar"><div id="sideBarTab"><h2>目录导航</h2></div><div id="sideBarContents" style="display: none;"><dl><dt name="0">第一种：在正文上方直接添加目录</dt><dd name="1">1. 申请开通js权限</dd><dd name="2">2. 添加js脚本到"页脚Html代码"</dd><dd name="3">3. 按格式写文章</dd><dt name="4">第二种：在文章右上角添加目录导航</dt><dd name="5">1. 申请开通js权限</dd><dd name="6">2. 添加css代码到"页面定制CSS代码"</dd><dd name="7">3. 添加js脚本到"页首Html代码"</dd><dd name="8">4. 按格式写文章</dd></dl></div></div></body></html>

博客园-其他

[5种回到顶部的写法从实现到增强 - 小火柴的蓝色理想 - 博客园](https://www.cnblogs.com/xiaohuochai/p/5836179.html#anchor2

[博客园为文章添加目录 - ning-wang - 博客园](https://www.cnblogs.com/ning-wang/p/7656847.html

[【分享】博客美化(6)为你的博文自动添加目录 - 数据之巅 - 博客园](https://www.cnblogs.com/asxinyu/p/Bolg_Category_AddArticleCategory_6.html#autoid-1-0-0

[K8s-1-交付dubbo微服务 - zxhy哦 - 博客园](https://www.cnblogs.com/jinmuqq222/p/13545820.html#anchor13

小火柴代码

Context

//requestAnimationFrame兼容写法

if(!window.requestAnimationFrame){

var lastTime = 0;

window.requestAnimationFrame = function(callback){

var currTime = new Date().getTime();

var timeToCall = Math.max(0,16.7-(currTime - lastTime));

var id = window.setTimeout(function(){

callback(currTime + timeToCall);

},timeToCall);

lastTime = currTime + timeToCall;

return id;

}

if (!window.cancelAnimationFrame) {

window.cancelAnimationFrame = function(id) {

clearTimeout(id);

};

}

//事件处理程序兼容写法

function addEvent(target,type,handler){

if(target.addEventListener){

target.addEventListener(type,handler,false);

}else{

target.attachEvent('on'+type,function(event){

return handler.call(target,event);

});

}

/*******生成元素*******/

var list = document.createElement('ul');

list.id = 'list';

list.innerHTML = '<li id="menuTop">回到顶部</li>\

<li id="menuFavour">点赞(<span id="favourNum">0</span>赞)</li>\

<li id="menuCommand">评论</li>';

document.body.appendChild(list);

/*******添加样式**********/

function loadStyles(str){

var style = document.createElement("style");

style.type = "text/css";

try{

style.innerHTML = str;

}catch(ex){

style.styleSheet.cssText = str;

}

var head = document.getElementsByTagName('head')[0];

head.appendChild(style);

}

loadStyles("#list{margin: 0!important;\

padding: 0!important;\

width: 120px;\

text-align: center;\

cursor: pointer;\

font:20px/40px '宋体';\

background-color: #eee;\

position:fixed;\

display:none;}\

#list li{list-style:none!important;}\

#list li:hover{background-color: lightblue;color: white;font-weight:bold;}");

//DOM结构稳定后，再操作

addEvent(window,'load', contextMenuLoad);

function contextMenuLoad(){

/********显示和隐藏菜单***********/

addEvent(document,'click',function(){

list.style.display = 'none';

})

//右键点击时，菜单显示

document.oncontextmenu = function(e){

e = e || event;

//通常情况下，菜单的位置就是鼠标的位置

list.style.left = e.clientX + 'px';

list.style.top = e.clientY + 'px';

//当鼠标的位置到视口底部的位置小于菜单的高度，则鼠标的位置为菜单的底部位置

if(document.documentElement.clientHeight - e.clientY < list.offsetHeight){

list.style.top = e.clientY - list.offsetHeight + 'px';

}

//当鼠标的位置到视口右侧的位置小于菜单的宽度，则视口的右侧为菜单的右侧

if(document.documentElement.clientWidth - e.clientX < list.offsetWidth){

list.style.left = document.documentElement.clientWidth - list.offsetHeight + 'px';

}

list.style.display = 'block';

//点击右键的同时按下ctrl键，那么将显示默认右键菜单

if(e.ctrlKey){

list.style.display = 'none';

//如果只是点击右键，则显示自定义菜单

}else{

return false;

}

/*********回到顶部功能*********/

var timer = null;

menuTop.onclick = function(){

cancelAnimationFrame(timer);

//获取当前毫秒数

var startTime = +new Date();

//获取当前页面的滚动高度

var b = document.body.scrollTop || document.documentElement.scrollTop;

var d = 500;

var c = b;

timer = requestAnimationFrame(function func(){

var t = d - Math.max(0,startTime - (+new Date()) + d);

document.documentElement.scrollTop = document.body.scrollTop = t * (-c) / d + b;

timer = requestAnimationFrame(func);

if(t == d){

cancelAnimationFrame(timer);

}

});

};

/*********点赞功能**********/

//模拟原始点赞按钮的点击事件

var digg = document.getElementById('div_digg');

if(digg){

menuFavour.onclick = digg.children[0].onclick;

}

//获取赞成数的函数

function getfavourNum(){

if(digg){

favourNum.innerHTML = digg.children[0].children[0].innerHTML;

}

//页面载入时获取赞成数

getfavourNum();

if(menuFavour.addEventListener){

menuFavour.addEventListener('click',function(){

setTimeout(function(){

getfavourNum();

},2000);

})

}else{

menuFavour.attachEvent('onclick',function(){

setTimeout(function(){

getfavourNum();

},2000);

})

}

/*********评论功能*********/

menuCommand.onclick = function(){

document.getElementById('comment_form_container').scrollIntoView();

}

Catalog

//事件处理程序兼容写法

function addEvent(target,type,handler){

if(target.addEventListener){

target.addEventListener(type,handler,false);

}else{

target.attachEvent('on'+type,function(event){

return handler.call(target,event);

});

}

//DOM结构稳定后，再操作

addEvent(window,'load', fnCata);

function fnCata(){

/*动态样式*/

function loadStyles(str){

loadStyles.mark = 'load';

var style = document.createElement("style");

style.type = "text/css";

try{

style.innerHTML = str;

}catch(ex){

style.styleSheet.cssText = str;

}

var head = document.getElementsByTagName('head')[0];

head.appendChild(style);

}

if(loadStyles.mark != 'load'){

loadStyles("h6{margin:0;padding:0;}\

.box{position: fixed; left: 10px;top: 60px;font:16px/30px '宋体'; border: 2px solid #ccc;padding: 4px; border-radius:5px;min-width:80px;max-width:118px;overflow:hidden;cursor:default;background:rgba(0,0,0,0.1);}\

.boxHide{border:none;width:60px;height:30px;padding:0;}\

.box-title{text-align:center;font-size:20px;color:#444;}\

.box-quit{position: absolute;text-align:center; right: 0;top: 4px;cursor:pointer;font-weight:bold;}\

.box-quitAnother{background:#3399ff;left:0;top:0;}\

a.box-anchor{display:block;text-decoration:none;color:black; border-left: 3px solid transparent;padding:0 3px;margin-bottom: 3px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}\

a.box-anchor:hover{color:#3399ff;}\

a.box-anchorActive{color:#3399ff;text-decoration:underline;border-color:#2175bc};");

};

/*设置章节标题函数*/

function setCatalog(){

//获取页面中所有的script标题

var aEle = document.getElementsByTagName('script');

//设置sel变量，用于保存其选择符的字符串值

var sel;

//获取script标签上的data-selector值

Array.prototype.forEach.call(aEle,function(item,index,array){

sel = item.getAttribute('data-selector');

if(sel) return;

})

//默认参数为h3标签

if(sel == undefined){

sel ='h3';

}

//选取博文

var article = document.getElementById('cnblogs_post_body');

//选取文章中所有的章节标题

var tempArray = article.querySelectorAll(sel);

//为每一个章节标题顺序添加锚点标识

Array.prototype.forEach.call(tempArray, function(item, index, array) {

item.setAttribute('id','anchor' + (1+index));

});

//返回章节标题这个类数组

return tempArray;

}

//设置全局变量Atitle保存添加锚点标识的标题项

var aTitle = setCatalog();

/*生成目录*/

function buildCatalog(arr){

//由于每个部件的创建过程都类似，所以写成一个函数进行服用

function buildPart(json){

var oPart = document.createElement(json.selector);

if(json.id){oPart.setAttribute('id',json.id);}

if(json.className){oPart.className = json.className;}

if(json.innerHTML){oPart.innerHTML = json.innerHTML;}

if(json.href){oPart.setAttribute('href',json.href);}

if(json.title){oPart.title = json.title;}

if(json.appendToBox){

oBox.appendChild(oPart);

}

return oPart;

}

//取得章节标题的个数

len = arr.length;

//创建最外层div

var oBox = buildPart({

selector:'div',

id:'box',

className:'box boxHide'

});

//创建关闭按钮

buildPart({

selector:'span',

id:'boxQuit',

className:'box-quit box-quitAnother',

innerHTML:'显示目录',

appendToBox:true

});

//创建目录标题

buildPart({

selector:'h6',

className:'box-title',

innerHTML:'目录',

appendToBox:true

});

//创建目录项

for(var i = 0; i < len; i++){

buildPart({

selector:'a',

className:'box-anchor',

href:'#anchor' + (1+i),

title:arr[i].innerHTML,

innerHTML:'['+(i+1)+']'+arr[i].innerHTML,

appendToBox:true

});

}

//将目录加入文档中

document.body.appendChild(oBox);

}

buildCatalog(aTitle);

/*点击及滚轮事件*/

(function(){

var oBox = document.getElementById('box');

//设置目录内各组件的点击事件

oBox.onclick = function(e){

e = e || event;

if(oBox.isMove) return;

var target = e.target || e.srcElement;

//设置关闭按钮的点击事件

if(target.id == 'boxQuit'){

if(target.isHide){

target.innerHTML = '显示目录';

target.className = 'box-quit box-quitAnother'

this.className = 'box boxHide';

target.isHide = false;

}else{

target.innerHTML = '×';

target.className = 'box-quit';

this.className = 'box';

target.isHide = true;

}

//获取target的href值

var sHref = target.getAttribute('href');

//设置目录项的点击事件

if(/anchor/.test(sHref)){

anchorActive(target);

}

//由于点击事件和滚轮事件都需要将目录项发生样式变化，所以声明锚点激活函数

function anchorActive(obj){

var parent = obj.parentNode;

var aAnchor = parent.getElementsByTagName('a');

//将所有目录项样式设置为默认状态

Array.prototype.forEach.call(aAnchor,function(item,index,array){

item.className = 'box-anchor';

})

//将当前目录项样式设置为点击状态

obj.className = 'box-anchor box-anchorActive';

}

//设置滚轮事件

var wheel = function(e){

//获取列表项

var aAnchor = oBox.getElementsByTagName('a');

//获取章节题目项

Array.prototype.forEach.call(aTitle,function(item,index,array){

//获取当前章节题目离可视区上侧的距离

var iTop = item.getBoundingClientRect().top;

//获取下一个章节题目

var oNext = array[index+1];

//如果存在下一个章节题目，则获取下一个章节题目离可视区上侧的距离

if(oNext){

var iNextTop = array[index+1].getBoundingClientRect().top;

}

//当前章节题目离可视区上侧的距离小于10时

if(iTop <= 10){

//当下一个章节题目不存在，或下一个章节题目离可视区上侧的距离大于10时，设置当前章节题目对应的目录项为激活态

if(iNextTop > 10 || !oNext){

anchorActive(aAnchor[index]);

}

});

}

addEvent(window,'scroll',wheel)

})();

/*拖拽*/

(function(){

var x0,y0,x1,y1,isMoving;

var ele = document.getElementById('box');

var L0,R0,T0,B0,EH,EW;

var mousedownHandler = function(e){

e = e || event;

//获取元素距离定位父级的x轴及y轴距离

x0 = this.offsetLeft;

y0 = this.offsetTop;

//获取此时鼠标距离视口左上角的x轴及y轴距离

x1 = e.clientX;

y1 = e.clientY;

//按下鼠标时，表示正在运动

isMoving = true;

//鼠标按下时，获得此时的页面区域

L0 = 0;

R0 = document.documentElement.clientWidth;

T0 = 0;

B0 = document.documentElement.clientHeight;

//鼠标按下时，获得此时的元素宽高

EH = ele.offsetHeight;

EW = ele.offsetWidth;

}

var mousemoveHandler = function(e){

//如果没有触发down事件，而直接触发move事件，则函数直接返回

if(!isMoving){

return;

}

e = e || event;

//获取此时鼠标距离视口左上角的x轴及y轴距离

var x2 = e.clientX;

var y2 = e.clientY;

//计算此时元素应该距离视口左上角的x轴及y轴距离

var X = x0 + (x2 - x1);

var Y = y0 + (y2 - y1);

/******范围限定*******/

//获取鼠标移动时元素四边的瞬时值

var L = X;

var R = X + EW;

var T = Y;

var B = Y + EH;

//在将X和Y赋值给left和top之前，进行范围限定。只有在范围内时，才进行相应的移动

//如果脱离左侧范围，则left置L0

if(L < L0){X = L0;}

//如果脱离右侧范围，则left置为R0

if(R > R0){X = R0 - EW;}

//如果脱离上侧范围，则top置T0

if(T < T0){Y = T0;}

//将X和Y的值赋给left和top，使元素移动到相应位置

ele.style.left = X + 'px';

ele.style.top = Y + 'px';

}

var mouseupHandler = function(e){

//鼠标抬起时，表示停止运动

isMoving = false;

//释放全局捕获

if(ele.releaseCapture){

ele.releaseCapture();

}

var preventDefaultHandler = function(e){

e = e || event;

if(e.preventDefault){

e.preventDefault();

}else{

e.returnValue = false;

}

//IE8-浏览器阻止默认行为

if(ele.setCapture){

ele.setCapture();

}

addEvent(ele,'mousedown',mousedownHandler);

addEvent(ele,'mousedown',preventDefaultHandler);

addEvent(document,'mousemove',mousemoveHandler)

addEvent(document,'mouseup',mouseupHandler)

})();

};

(function(){

//生成元素

var progress = document.createElement('progress');

progress.id = 'progress';

progress.style.cssText = 'position:fixed;left:0;right:0;bottom:0;width:100%;height:12px;text-align:center;font:12px/12px "宋体";';

document.body.appendChild(progress);

//计算H

var H;

addEvent(window,'load',function(){

progress.max = H = cnblogs_post_body.scrollHeight;

});

//计算h及radio

addEvent(window,'scroll',function(){

var h = document.documentElement.scrollTop || document.body.scrollTop;

progress.value = h;

var radio = (h/H >= 1) ? 1 : h/H;

progress.innerHTML = progress.title = Math.floor(100*radio) + '%';

});

})();

(function(){

function whichMobile(){

var ua = navigator.userAgent;

if(/iPhone OS (\d+_\d+)/.test(ua)){

return 'iPhone' + RegExp.$1.replace("_",".");

}

if(/iPad.+OS (\d+_\d+)/.test(ua)){

return 'iPad' + RegExp.$1.replace("_",".")

}

if(/Android (\d+\.\d+)/.test(ua)){

return 'Android' + RegExp["$1"];

}

//如果是非移动端，则执行如下代码

if(!whichMobile()){

//获取博文标题

var oBox = document.getElementById('topics');

var oTitle = oBox.getElementsByTagName('h1')[0];

oTitle.style.paddingRight = '0';

//创建标识图片及外层包装div

var oImgBox = document.createElement('div');

oImgBox.style.cssText = 'position:absolute;margin-left:6px;display:inline-block;vertical-align:middle';

var oImg = new Image();

oImg.id = 'oImg';

oImg.style.cursor = 'pointer';

oImg.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAoklEQVQ4T+2T4Q2CMBCFv27CBjgCG+gIjAAbOAIjOIJs4Ai6gRvIBpjXXCOp19T/8pJLoTneXcj3Ah91wAV4bu68xwXoAZ2EzEAmE9AWTB6AelRDyaAx9zgh0wE4ATczcTdIE7wl0oe7wX/8RMHigfQTB3fDdM1IEvYyONdIVEOSqDwCY2Z2NaS/UNbqMSQmvauUPlfbNKpBSdTUVyXSs/XyBlRCNBG20I28AAAAAElFTkSuQmCC";

oImg.style.margin = '0';

oImgBox.appendChild(oImg);

//将标识图片插入标题后面

oTitle.appendChild(oImgBox);

//动态生成script标签，引入qrcode插件

var script = document.createElement("script");

script.type = "text/javascript";

script.src = 'https://files.cnblogs.com/files/xiaohuochai/qrcode.min.js';

document.body.appendChild(script);

//动态生成div标签，用于放置通过qrcode插件生成的二维码大图，默认隐藏显示

var oDiv = document.createElement('div');

oDiv.id = 'qrcode';

oDiv.mark = false;

oDiv.style.cssText = 'display:none;position:absolute;left:20px;top:-40px';

oImgBox.appendChild(oDiv);

addEvent(window,'load',function(){

new QRCode(oDiv, {

text: location.href,

width: 80,

height: 80

});

})

//鼠标移入标识图片外层oImgBox后，在该标识图片的右侧显示二维码图片

addEvent(oImgBox,'click',function(){

//如果mark为真，说明二维码图片正在显示，将其隐藏

if(oDiv.mark){

oDiv.style.display = 'none';

//否则说明二维码图片正在隐藏，将其显示

}else{

oDiv.style.display = 'block';

}

//将mark标识置反

oDiv.mark = !oDiv.mark;

})

}

})();

测试

以下这串代码，

分析下，

第一部分将网页的所有h2，h3提取出来，给他们加上超链接（也叫）

第二部分，每次修改的文本，都记录在了content字符串上，最后将content字符串放到了页首标签下，

// 生成目录索引列表

// ref: http://www.cnblogs.com/wangqiguo/p/4355032.html

// modified by: zzq

function GenerateContentList()

{

var mainContent = $('#cnblogs_post_body');

var h2_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h2,只需要将这里的h2换掉即可

if(mainContent.length < 1)

return;

if(h2_list.length>0)

{

var content = '<a name="_labelTop"></a>';

content += '<div id="navCategory" style="color:#152e97;">';

content += '<p style="font-size:18px;"><b>目录</b></p>';

content += '<ul>';

for(var i=0; i<h2_list.length; i++)

{

var go_to_top = '<div style="text-align: right;"><a href="#_labelTop" style="color:#f68a33">回到顶部</a><a name="_label' + i + '"></a></div>';

$(h2_list[i]).before(go_to_top);

var h3_list = $(h2_list[i]).nextAll("h3");

var li3_content = '';

for(var j=0; j<h3_list.length; j++)

{

var tmp = $(h3_list[j]).prevAll('h2').first();

if(!tmp.is(h2_list[i]))

break;

var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';

$(h3_list[j]).before(li3_anchor);

li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>';

}

var li2_content = '';

if(li3_content.length > 0)

li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';

else

li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';

content += li2_content;

}

content += '</ul>';

content += '</div><p> </p>';

content += '<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>';

if($('#cnblogs_post_body').length != 0 )

{

$($('#cnblogs_post_body')[0]).prepend(content);

}

GenerateContentList();

</script>

A标签才是超链接，dt标签不管用

Li是换行标签，每个a标签包含在一个li标签里，实现了换行。

版本

版本v1-右上角导航

版本说明：右上角导航代码修改，最初版，此版本问题是目录链接不正确，

功能：生成博客目录的JS工具

测试：IE8，火狐，google测试通过

孤傲苍狼

2014-5-11

var BlogDirectory = {

获取元素位置，距浏览器左边界的距离（left）和距浏览器上边界的距离（top）

getElementPosition:function (ele) {

var topPosition = 0;

var leftPosition = 0;

while (ele){

topPosition += ele.offsetTop;

leftPosition += ele.offsetLeft;

ele = ele.offsetParent;

}

return {top:topPosition, left:leftPosition};

获取滚动条当前位置

getScrollBarPosition:function () {

var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop;

return scrollBarPosition;

移动滚动条，finalPos 为目的位置，internal 为移动速度

moveScrollBar:function(finalpos, interval) {

//若不支持此方法，则退出

if(!window.scrollTo) {

return false;

}

//窗体滚动时，禁用鼠标滚轮

window.onmousewheel = function(){

return false;

};

//清除计时

if (document.body.movement) {

clearTimeout(document.body.movement);

}

var currentpos =BlogDirectory.getScrollBarPosition();//获取滚动条当前位置

var dist = 0;

if (currentpos == finalpos) {//到达预定位置，则解禁鼠标滚轮，并退出

window.onmousewheel = function(){

return true;

}

return true;

}

if (currentpos < finalpos) {//未到达，则计算下一步所要移动的距离

dist = Math.ceil((finalpos - currentpos)/10);

currentpos += dist;

}

if (currentpos > finalpos) {

dist = Math.ceil((currentpos - finalpos)/10);

currentpos -= dist;

}

var scrTop = BlogDirectory.getScrollBarPosition();//获取滚动条当前位置

window.scrollTo(0, currentpos);//移动窗口

if(BlogDirectory.getScrollBarPosition() == scrTop)//若已到底部，则解禁鼠标滚轮，并退出

{

window.onmousewheel = function(){

return true;

}

return true;

}

//进行下一步移动

var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")";

document.body.movement = setTimeout(repeat, interval);

htmlDecode:function (text){

var temp = document.createElement("div");

temp.innerHTML = text;

var output = temp.innerText || temp.textContent;

temp = null;

return output;

创建博客目录，

id表示包含博文正文的 div 容器的 id，

mt 和 st 分别表示主标题和次级标题的标签名称（如 H2、H3，大写或小写都可以！），

interval 表示移动的速度

createBlogDirectory:function (id, mt, st, interval){

//获取博文正文div容器

var elem = document.getElementById(id);

if(!elem) return false;

//获取div中所有元素结点

var nodes = elem.getElementsByTagName("*");

//创建博客目录的div容器

var divSideBar = document.createElement('DIV');

divSideBar.className = 'uprightsideBar';

divSideBar.setAttribute('id', 'uprightsideBar');

var divSideBarTab = document.createElement('DIV');

divSideBarTab.setAttribute('id', 'sideBarTab');

divSideBar.appendChild(divSideBarTab);

var h2 = document.createElement('H2');

divSideBarTab.appendChild(h2);

var txt = document.createTextNode('目录导航');

h2.appendChild(txt);

var divSideBarContents = document.createElement('DIV');

divSideBarContents.style.display = 'none';

divSideBarContents.setAttribute('id', 'sideBarContents');

divSideBar.appendChild(divSideBarContents);

//创建自定义列表

var dlist = document.createElement("dl");

divSideBarContents.appendChild(dlist);

var num = 0;//统计找到的mt和st

mt = mt.toUpperCase();//转化成大写

st = st.toUpperCase();//转化成大写

//遍历所有元素结点

for(var i=0; i<nodes.length; i++)

{

if(nodes[i].nodeName == mt|| nodes[i].nodeName == st)

{

//获取标题文本

var nodetext = nodes[i].innerHTML + "&#10";//innerHTML里面的内容可能有HTML标签，所以用正则表达式去除HTML的标签

nodetext = BlogDirectory.htmlDecode(nodetext);

//插入锚

nodes[i].setAttribute("id", "blogTitle" + num);

var item;

switch(nodes[i].nodeName)

{

case mt: //若为主标题

item = document.createElement("a");

break;

case st: //若为子标题

item = document.createElement("a");

break;

}

//创建锚链接

var itemtext = document.createTextNode(nodetext);

item.appendChild(itemtext);

item.setAttribute("href", "#_label" + num);

var brDiv = document.createElement('br');

item.appendChild(brDiv);//追加换行

//将自定义表项加入自定义列表中

dlist.appendChild(item);

num++;

}

if(num == 0) return false;

/*鼠标进入时的事件处理*/

divSideBarTab.onmouseenter = function(){

divSideBarContents.style.display = 'block';

}

/*鼠标离开时的事件处理*/

divSideBar.onmouseleave = function() {

divSideBarContents.style.display = 'none';

}

document.body.appendChild(divSideBar);

}

};

window.onload=function(){

/*页面加载完成之后生成博客目录*/

BlogDirectory.createBlogDirectory("cnblogs_post_body","h2","h3",100);

}

</script>

版本v2--

功能：生成博客目录的JS工具

测试：IE8，火狐，google测试通过

孤傲苍狼

2014-5-11

var BlogDirectory = {

获取元素位置，距浏览器左边界的距离（left）和距浏览器上边界的距离（top）

getElementPosition:function (ele) {

var topPosition = 0;

var leftPosition = 0;

while (ele){

topPosition += ele.offsetTop;

leftPosition += ele.offsetLeft;

ele = ele.offsetParent;

}

return {top:topPosition, left:leftPosition};

获取滚动条当前位置

getScrollBarPosition:function () {

var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop;

return scrollBarPosition;

移动滚动条，finalPos 为目的位置，internal 为移动速度

moveScrollBar:function(finalpos, interval) {

//若不支持此方法，则退出

if(!window.scrollTo) {

return false;

}

//窗体滚动时，禁用鼠标滚轮

window.onmousewheel = function(){

return false;

};

//清除计时

if (document.body.movement) {

clearTimeout(document.body.movement);

}

var currentpos =BlogDirectory.getScrollBarPosition();//获取滚动条当前位置

var dist = 0;

if (currentpos == finalpos) {//到达预定位置，则解禁鼠标滚轮，并退出

window.onmousewheel = function(){

return true;

}

return true;

}

if (currentpos < finalpos) {//未到达，则计算下一步所要移动的距离

dist = Math.ceil((finalpos - currentpos)/10);

currentpos += dist;

}

if (currentpos > finalpos) {

dist = Math.ceil((currentpos - finalpos)/10);

currentpos -= dist;

}

var scrTop = BlogDirectory.getScrollBarPosition();//获取滚动条当前位置

window.scrollTo(0, currentpos);//移动窗口

if(BlogDirectory.getScrollBarPosition() == scrTop)//若已到底部，则解禁鼠标滚轮，并退出

{

window.onmousewheel = function(){

return true;

}

return true;

}

//进行下一步移动

var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")";

document.body.movement = setTimeout(repeat, interval);

htmlDecode:function (text){

var temp = document.createElement("div");

temp.innerHTML = text;

var output = temp.innerText || temp.textContent;

temp = null;

return output;

//修改部分

创建博客目录，

id表示包含博文正文的 div 容器的 id，

mt 和 st 分别表示主标题和次级标题的标签名称（如 H2、H3，大写或小写都可以！），

interval 表示移动的速度

createBlogDirectory:function (id, mt, st, interval){

//获取博文正文div容器

var elem = document.getElementById(id);

if(!elem) return false;

//获取div中所有元素结点

var nodes = elem.getElementsByTagName("*");

//创建博客目录的div容器

var divSideBar = document.createElement('DIV');

divSideBar.className = 'uprightsideBar';

divSideBar.setAttribute('id', 'uprightsideBar');

var divSideBarTab = document.createElement('DIV');

divSideBarTab.setAttribute('id', 'sideBarTab');

divSideBar.appendChild(divSideBarTab);//在divsidebar后面添加了divsidebartab

var h2 = document.createElement('H2');

divSideBarTab.appendChild(h2);

var txt = document.createTextNode('目录导航');

h2.appendChild(txt);

var divSideBarContents = document.createElement('DIV');

divSideBarContents.style.display = 'none';

divSideBarContents.setAttribute('id', 'sideBarContents');

divSideBar.appendChild(divSideBarContents);

//创建自定义列表

var dlist = document.createElement("dl");

divSideBarContents.appendChild(dlist);

var num = 0;//统计找到的mt和st

mt = mt.toUpperCase();//转化成大写

st = st.toUpperCase();//转化成大写

//遍历所有元素结点

for(var i=0; i<nodes.length; i++)

{

if(nodes[i].nodeName == mt|| nodes[i].nodeName == st)

{

//获取标题文本

var nodetext = nodes[i].innerHTML;//innerHTML里面的内容可能有HTML标签，所以用正则表达式去除HTML的标签，+ "&#10"代表换行

nodetext = BlogDirectory.htmlDecode(nodetext);

//插入锚

nodes[i].setAttribute("id", "blogTitle" + num); //没什么用

var item;

switch(nodes[i].nodeName)

{

case mt: //若为主标题

item = document.createElement("a");

var nodehref = "#" + nodes[i].previousSibling.lastChild.name; //调用h2节点上节点a

break;

case st: //若为子标题

item = document.createElement("a");

var nodehref = "#" + nodes[i].previousSibling.name; //调用h2节点上节点a

break;

}

//创建锚链接

var itemtext = document.createTextNode(nodetext);

item.appendChild(itemtext);

console.log(nodehref, itemtext); //在浏览器控制台打印出值

item.setAttribute("href", nodehref);

var brDiv = document.createElement('br');

item.appendChild(brDiv);//追加换行

//将自定义表项加入自定义列表中

dlist.appendChild(item);

num++;

}

if(num == 0) return false;

/*鼠标进入时的事件处理*/

divSideBarTab.onmouseenter = function(){

divSideBarContents.style.display = 'block';

}

/*鼠标离开时的事件处理*/

divSideBar.onmouseleave = function() {

divSideBarContents.style.display = 'none';

}

document.body.appendChild(divSideBar);

}

};

window.onload=function(){

/*页面加载完成之后生成博客目录*/

BlogDirectory.createBlogDirectory("cnblogs_post_body","h2","h3",100);

}

</script>

版本v3--发布

页面定制css代码

/*生成博客目录的CSS*/

#uprightsideBar{

font-size:12px;

font-family:Arial, Helvetica, sans-serif;

text-align:left;

position:fixed;/*将div的位置固定到距离top:50px，right:0px的位置，这样div就会处在最右边的位置，距离顶部50px*/

top:50px;

right:0px;

width: auto;

height: auto;

}

#sideBarTab{

float:left;

width:30px;

border:1px solid #e5e5e5;

border-right:none;

text-align:center;

background:#ffffff;

}

#sideBarContents{

float:left;

overflow:auto;

overflow-x:hidden;!important;

width:200px;

min-height:108px;

max-height:460px;

border:1px solid #e5e5e5;

border-right:none;

background:#ffffff;

}

#sideBarContents dl{

margin:0;

padding:0;

}

#sideBarContents dt{

margin-top:5px;

margin-left:5px;

}

#sideBarContents dd, dt {

cursor: pointer;

}

#sideBarContents dd:hover, dt:hover {

color:#A7995A;

}

#sideBarContents dd{

margin-left:20px;

}

页首html代码

// 生成目录索引列表

// ref: http://www.cnblogs.com/wangqiguo/p/4355032.html

// modified by: zzq

function GenerateContentList()

{

var mainContent = $('#cnblogs_post_body');

var h2_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h2,只需要将这里的h2换掉即可

if(mainContent.length < 1)

return;

if(h2_list.length>0)

{

//这部分是生成的目录标题及样式

var content = '<a name="_labelTop"></a>'; //这个a标签为回到顶部的链接地址。

content += '<div id="navCategory" style="color:#152e97;">';

content += '<p style="font-size:18px;"><b>目录</b></p>';

content += '<ul>';

//开始遍历标题h2

for(var i=0; i<h2_list.length; i++)

{

var go_to_top = '<div style="text-align: right;"><a href="#_labelTop" style="color:#f68a33">回到顶部</a><a name="_label' + i + '"></a></div>'; //在每一个标题前，加上回到顶部的href链接，以及为该位置生成了a标签

$(h2_list[i]).before(go_to_top); //并将这串字符串添加到每个h2标签之前，也就是为每个h2标签添加了超链接

var h3_list = $(h2_list[i]).nextAll("h3"); //拿到h2标签后面所有的h3标签，是一个数组，并将其赋值

var li3_content = '';

for(var j=0; j<h3_list.length; j++) //遍历所有当前h2标签后面的所有h3标签

{

var tmp = $(h3_list[j]).prevAll('h2').first(); //获取h3节点前面所有的h2节点的第一个节点

if(!tmp.is(h2_list[i])) //tmp是i所在的h2节点后的同级h3节点所有节点中的j。前面的h2节点集合的第一个（感觉应该选最后一个，可能是和next相反（第一是最后）），如果不是与h2[i]节点相等了，就跳出循环；因为j后面有h2，所有要暂停遍历

break;

var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';

$(h3_list[j]).before(li3_anchor); //在当前遍历到j的h3标签加上a标签

li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>'; //给首页目录也加上href，链接到上面的a标签

}

var li2_content = '';

if(li3_content.length > 0)

li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';

else

li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';

content += li2_content;

}

content += '</ul>';

content += '</div><p> </p>';

content += '<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>';

if($('#cnblogs_post_body').length != 0 )

{

$($('#cnblogs_post_body')[0]).prepend(content);

}

GenerateContentList();

</script>

页脚html代码

功能：生成博客目录的JS工具

测试：IE8，火狐，google测试通过

孤傲苍狼

2014-5-11

var BlogDirectory = {

获取元素位置，距浏览器左边界的距离（left）和距浏览器上边界的距离（top）

getElementPosition:function (ele) {

var topPosition = 0;

var leftPosition = 0;

while (ele){

topPosition += ele.offsetTop;

leftPosition += ele.offsetLeft;

ele = ele.offsetParent;

}

return {top:topPosition, left:leftPosition};

获取滚动条当前位置

getScrollBarPosition:function () {

var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop;

return scrollBarPosition;

移动滚动条，finalPos 为目的位置，internal 为移动速度

moveScrollBar:function(finalpos, interval) {

//若不支持此方法，则退出

if(!window.scrollTo) {

return false;

}

//窗体滚动时，禁用鼠标滚轮

window.onmousewheel = function(){

return false;

};

//清除计时

if (document.body.movement) {

clearTimeout(document.body.movement);

}

var currentpos =BlogDirectory.getScrollBarPosition();//获取滚动条当前位置

var dist = 0;

if (currentpos == finalpos) {//到达预定位置，则解禁鼠标滚轮，并退出

window.onmousewheel = function(){

return true;

}

return true;

}

if (currentpos < finalpos) {//未到达，则计算下一步所要移动的距离

dist = Math.ceil((finalpos - currentpos)/10);

currentpos += dist;

}

if (currentpos > finalpos) {

dist = Math.ceil((currentpos - finalpos)/10);

currentpos -= dist;

}

var scrTop = BlogDirectory.getScrollBarPosition();//获取滚动条当前位置

window.scrollTo(0, currentpos);//移动窗口

if(BlogDirectory.getScrollBarPosition() == scrTop)//若已到底部，则解禁鼠标滚轮，并退出

{

window.onmousewheel = function(){

return true;

}

return true;

}

//进行下一步移动

var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")";

document.body.movement = setTimeout(repeat, interval);

htmlDecode:function (text){

var temp = document.createElement("div");

temp.innerHTML = text;

var output = temp.innerText || temp.textContent;

temp = null;

return output;

创建博客目录，

id表示包含博文正文的 div 容器的 id，

mt 和 st 分别表示主标题和次级标题的标签名称（如 H2、H3，大写或小写都可以！），

interval 表示移动的速度

createBlogDirectory:function (id, mt, st, interval){

//获取博文正文div容器

var elem = document.getElementById(id);

if(!elem) return false;

//获取div中所有元素结点

var nodes = elem.getElementsByTagName("*");

//创建博客目录的div容器

var divSideBar = document.createElement('DIV');

divSideBar.className = 'uprightsideBar';

divSideBar.setAttribute('id', 'uprightsideBar');

var divSideBarTab = document.createElement('DIV');

divSideBarTab.setAttribute('id', 'sideBarTab');

divSideBar.appendChild(divSideBarTab);

var h2 = document.createElement('H2');

divSideBarTab.appendChild(h2);

var txt = document.createTextNode('目录导航');

h2.appendChild(txt);

var divSideBarContents = document.createElement('DIV');

divSideBarContents.style.display = 'none';

divSideBarContents.setAttribute('id', 'sideBarContents');

divSideBar.appendChild(divSideBarContents);

//创建自定义列表

var dlist = document.createElement("dl");

divSideBarContents.appendChild(dlist);

var num = 0;//统计找到的mt和st

mt = mt.toUpperCase();//转化成大写

st = st.toUpperCase();//转化成大写

//遍历所有元素结点

for(var i=0; i<nodes.length; i++)

{

if(nodes[i].nodeName == mt|| nodes[i].nodeName == st)

{

//获取标题文本

var nodetext = nodes[i].innerHTML;//innerHTML里面的内容可能有HTML标签，所以用正则表达式去除HTML的标签，+ "&#10"代表换行

nodetext = BlogDirectory.htmlDecode(nodetext);

//插入锚

nodes[i].setAttribute("id", "blogTitle" + num); //没什么用

var item;

switch(nodes[i].nodeName)

{

case mt: //若为主标题

item = document.createElement("a");

var nodehref = "#" + nodes[i].previousSibling.lastChild.name; //调用h2节点上节点a

break;

case st: //若为子标题

item = document.createElement("a");

var nodehref = "#" + nodes[i].previousSibling.name; //调用h2节点上节点a

break;

}

//创建锚链接

var itemtext = document.createTextNode(nodetext);

item.appendChild(itemtext);

console.log(nodehref, itemtext); //在浏览器控制台打印出值

item.setAttribute("href", nodehref);

var brDiv = document.createElement('br');

item.appendChild(brDiv);//追加换行

//将自定义表项加入自定义列表中

dlist.appendChild(item);

num++;

}

if(num == 0) return false;

/*鼠标进入时的事件处理*/

divSideBarTab.onmouseenter = function(){

divSideBarContents.style.display = 'block';

}

/*鼠标离开时的事件处理*/

divSideBar.onmouseleave = function() {

divSideBarContents.style.display = 'none';

}

document.body.appendChild(divSideBar);

}

};

window.onload=function(){

/*页面加载完成之后生成博客目录*/

BlogDirectory.createBlogDirectory("cnblogs_post_body","h2","h3",100);

}

</script>

版本v4

功能：

添加h1，h2，h3。3个标题生成目录

代码分析

代码

页首的html代码

// 生成目录索引列表

// ref: http://www.cnblogs.com/wangqiguo/p/4355032.html

// modified by: zzq

function GenerateContentList()

{

var mainContent = $('#cnblogs_post_body');

var h1_list = $('#cnblogs_post_body h1');//如果你的章节标题不是h1,只需要将这里的h1换掉即可

if(mainContent.length < 1)

return;

if(h1_list.length>0)

{

var content = '<a name="_labelTop"></a>';

content += '<div id="navCategory" style="color:#152e97;">';

content += '<p style="font-size:18px;"><b>目录</b></p>';

content += '<ul>';

var li1_content = '';

for(var i=0; i<h1_list.length; i++)

{

var go_to_top = '<div style="text-align: right;"><a href="#_labelTop" style="color:#f68a33">回到顶部</a><a name="_label' + i + '"></a></div>';

$(h1_list[i]).before(go_to_top);

li1_content = '<li><a href="#_label' + i + '">' + $(h1_list[i]).text() + '</a></li>';

content += li1_content;

var h2_list = $(h1_list[i]).nextAll("h2");

var li2_content = '';

for(var j=0; j<h2_list.length; j++)

{

var tmp = $(h2_list[j]).prevAll('h1').first();

if(!tmp.is(h1_list[i]))

break;

var li2_anchor = ' <div style="text-align: right;"><a href="#_labelTop" style="color:#f68a33">回到顶部</a><a name="_label' + i + '_' + j + '"></a>';

$(h2_list[j]).before(li2_anchor);

li2_content = '<ul><li><a href="#_label' + i + '_' + j + '">' + $(h2_list[j]).text() + '</a></li></ul>';

content += li2_content;

var h3_list = $(h2_list[j]).nextAll("h3");

var li3_content = '';

for(var k=0; k<h3_list.length; k++)

{

var tmp_k = $(h3_list[k]).prevAll('h2').first();

if(!tmp_k.is(h2_list[j]))

break;

var li3_anchor = '<div style="text-align: right;"><a href="#_labelTop" style="color:#f68a33">回到顶部</a><a name="_label' + i + '_' + j + '_' + k +'"></a>';

$(h3_list[k]).before(li3_anchor);

li3_content = '<ul><ul><li><a href="#_label' + i + '_' + j + '_' + k + '">' + $(h3_list[k]).text() + '</a></li></ul></ul>';

content += li3_content;

}

}//第一层for循环，h1

content += '</ul>';

content += '</div><p> </p>';

content += '<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>';

console.log(content);

if($('#cnblogs_post_body').length != 0 )

{

$($('#cnblogs_post_body')[0]).prepend(content);

}

GenerateContentList();

</script>

页脚

功能：生成博客目录的JS工具

测试：IE8，火狐，google测试通过

孤傲苍狼

2014-5-11

var BlogDirectory = {

获取元素位置，距浏览器左边界的距离（left）和距浏览器上边界的距离（top）

getElementPosition:function (ele) {

var topPosition = 0;

var leftPosition = 0;

while (ele){

topPosition += ele.offsetTop;

leftPosition += ele.offsetLeft;

ele = ele.offsetParent;

}

return {top:topPosition, left:leftPosition};

获取滚动条当前位置

getScrollBarPosition:function () {

var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop;

return scrollBarPosition;

移动滚动条，finalPos 为目的位置，internal 为移动速度

moveScrollBar:function(finalpos, interval) {

//若不支持此方法，则退出

if(!window.scrollTo) {

return false;

}

//窗体滚动时，禁用鼠标滚轮

window.onmousewheel = function(){

return false;

};

//清除计时

if (document.body.movement) {

clearTimeout(document.body.movement);

}

var currentpos =BlogDirectory.getScrollBarPosition();//获取滚动条当前位置

var dist = 0;

if (currentpos == finalpos) {//到达预定位置，则解禁鼠标滚轮，并退出

window.onmousewheel = function(){

return true;

}

return true;

}

if (currentpos < finalpos) {//未到达，则计算下一步所要移动的距离

dist = Math.ceil((finalpos - currentpos)/10);

currentpos += dist;

}

if (currentpos > finalpos) {

dist = Math.ceil((currentpos - finalpos)/10);

currentpos -= dist;

}

var scrTop = BlogDirectory.getScrollBarPosition();//获取滚动条当前位置

window.scrollTo(0, currentpos);//移动窗口

if(BlogDirectory.getScrollBarPosition() == scrTop)//若已到底部，则解禁鼠标滚轮，并退出

{

window.onmousewheel = function(){

return true;

}

return true;

}

//进行下一步移动

var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")";

document.body.movement = setTimeout(repeat, interval);

htmlDecode:function (text){

var temp = document.createElement("div");

temp.innerHTML = text;

var output = temp.innerText || temp.textContent;

temp = null;

return output;

创建博客目录，

id表示包含博文正文的 div 容器的 id，

mt 和 st 分别表示主标题和次级标题的标签名称（如 H2、H3，大写或小写都可以！），

interval 表示移动的速度

createBlogDirectory:function (id, mt, st, interval){

//获取博文正文div容器

var elem = document.getElementById(id);

if(!elem) return false;

//获取div中所有元素结点

var nodes = elem.getElementsByTagName("*");

//创建博客目录的div容器

var divSideBar = document.createElement('DIV');

divSideBar.className = 'uprightsideBar';

divSideBar.setAttribute('id', 'uprightsideBar');

var divSideBarTab = document.createElement('DIV');

divSideBarTab.setAttribute('id', 'sideBarTab');

divSideBar.appendChild(divSideBarTab);

var h2 = document.createElement('H2');

divSideBarTab.appendChild(h2);

var txt = document.createTextNode('目录导航');

h2.appendChild(txt);

var divSideBarContents = document.createElement('DIV');

divSideBarContents.style.display = 'none';

divSideBarContents.setAttribute('id', 'sideBarContents');

divSideBar.appendChild(divSideBarContents);

//创建自定义列表

var dlist = document.createElement("dl");

divSideBarContents.appendChild(dlist);

var num = 0;//统计找到的mt和st

mt = mt.toUpperCase();//转化成大写

st = st.toUpperCase();//转化成大写

//遍历所有元素结点

for(var i=0; i<nodes.length; i++)

{

if(nodes[i].nodeName == mt|| nodes[i].nodeName == st)

{

//获取标题文本

var nodetext = nodes[i].innerHTML;//innerHTML里面的内容可能有HTML标签，所以用正则表达式去除HTML的标签，+ "&#10"代表换行

nodetext = BlogDirectory.htmlDecode(nodetext);

//插入锚

nodes[i].setAttribute("id", "blogTitle" + num); //没什么用

var item;

switch(nodes[i].nodeName)

{

case mt: //若为主标题

item = document.createElement("a");

var nodehref = "#" + nodes[i].previousSibling.lastChild.name; //调用h2上一个节点div的最后一个节点a。然后读取他的属性name，也就是链接地址

break;

case st: //若为子标题

item = document.createElement("a");

var nodehref ="#" + nodes[i].previousSibling.lastChild.name; //调用h2上一个节点div的最后一个节点a。然后读取他的属性name，也就是链接地址

break;

}

//创建锚链接

var itemtext = document.createTextNode(nodetext);

item.appendChild(itemtext);

item.setAttribute("href", nodehref);

var brDiv = document.createElement('br');

item.appendChild(brDiv);//追加换行

//将自定义表项加入自定义列表中

dlist.appendChild(item);

num++;

}

if(num == 0) return false;

/*鼠标进入时的事件处理*/

divSideBarTab.onmouseenter = function(){

divSideBarContents.style.display = 'block';

}

/*鼠标离开时的事件处理*/

divSideBar.onmouseleave = function() {

divSideBarContents.style.display = 'none';

}

document.body.appendChild(divSideBar);

}

};

window.onload=function(){

/*页面加载完成之后生成博客目录*/

BlogDirectory.createBlogDirectory("cnblogs_post_body","h1","h2",100);

}

</script>

故障

版本v1-链接生成规则不一致

首页编码的生成规律是h2为label+h2数字，h2的规律是label+h2的数字_h2顺序的数字

我们的导航框是用的node遍历，得到的结果都是label+数字

我只是照着你bai的问题写的du：

function getHref(){

var hrefArr = document.getElementsByTagName('a'); //获取这个页面zhi的所有A标签

for( var i=0; i<hrefArr.length; i++ ){

//全部修改为'dpan';

hrefArr[i].href = 'dpan'; //修改语dao句

document.write(nodes.value);

}

</script>

版本v2-h2标签取上级标签失败

使用的代码是取h2或者h2的上一个标签，现在h2应该取上一个标签第2个a标签

取上一个标签: var nodehref = nodes[i].previousSiblinghref.name; //取到的是div标签

console.log(nodes[i].previousSibling.lastChild.name, itemtext);

修改如下：

var nodehref = "#" + nodes[i].previousSibling.name; //调用h2节点上节点a

版本v4-语法有问题

h1，h2，h3这3层集合对应遍历的I,j,k循环遍历好多引用错了

比如遍历到第一个h1，开始遍历h2，在遍历h2第一个时开始遍历h2，下面的h3.

这样就获得了该h2下的所有h3串文本li3,但是h2的遍历还没有结束

继续第二个h2，

这样就导致了h2生成了一个h2串，h3生成了一个h3串，

应该是每个h2串下面有一串h3

知识点

html语言

<ul> 标签是写在li标签外面，a标签应该写在li里面。一个ul代表一个缩进，还给加2个圆圈

'<ul><li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li></ul>';

li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>'; //给首页目录也加上href，链接到上面的a标签

}

var li2_content = '';

if(li3_content.length > 0)

li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';

谷歌调试技巧

获取节点对象的相关节点

[JS/JQuery获取当前元素的上一个/下一个兄弟级元素等元素的方法 - 古兰精 - 博客园](https://www.cnblogs.com/goloving/p/7183803.html

JS对象方法获取：

Document产生的对象支持以下方法

var chils= s.childNodes; //得到s的全部子节点

var par=s.parentNode; //得到s的父节点

var ns=s.nextSibling; //获得s的下一个兄弟节点

var ps=s.previousSibling; //得到s的上一个兄弟节点

var fc=s.firstChild; //获得s的第一个子节点

var lc=s.lastChild; //获得s的最后一个子节点

var elem = document.getElementById(id); //创建了一个document对象

var nodes = elem.getElementsByTagName("*");

var nodehref = nodes[i].previousSiblinghref.name;

//document.write(nodehref);

操作节点

var h2_list = $('#cnblogs_post_body h2'); #获取所有h2节点对象数组

$(h2_list[i]).before(go_to_top); #在节点前添加字符串变量go_to_top，注意$()

h2_list.length #获取h2标签数组长度

$(h1_list[i]).text() #获取节点文本

在节点后面追加节点

switch(nodes[i].nodeName)

{

case mt: //若为主标题

item = document.createElement("a");//创建节点

break;

case st: //若为子标题

item = document.createElement("a");

break;

}

//创建锚链接

var itemtext = document.createTextNode(nodetext); //将文本传递给节点

item.appendChild(itemtext);

item.setAttribute("href", "#_label" + num);

//在a节点，链接节点之后追加了空格标签

var brDiv = document.createElement('br');

item.appendChild(brDiv);//追加换行

给节点添加属性

item.setAttribute("href", "#_label" + num);

调试

document.write(nodehref); //打开独立网页打印值

alert(num); //弹出窗口打印值

console.log(num); //在浏览器控制台打印文本

console.log(nodehref, itemtext); //在浏览器控制台打印出值

js注释

单行注释

单行注释以 // 开头。

任何位于 // 与行末之间的文本都会被 JavaScript 忽略（不会执行）。

本例在每条代码行之前使用单行注释：

多行注释

多行注释以 /* 开头，以 */ 结尾。

任何位于 /* 和 */ 之间的文本都会被 JavaScript 忽略。

本例使用多行注释（注释块）来解释代码

js语法

prevall

[JQuery官方学习资料（译）：遍历 - M守护神 - 博客园](https://www.cnblogs.com/liusuqi/p/3300296.html

[jQuery找兄弟系列next(),nextAll(),nextUntil(),prev(),prevAll(),prevUntil(),siblings() - BloggerYan - 博客园](https://www.cnblogs.com/shy1766IT/p/4472856.html

定义和用法

prevAll() 获得当前匹配元素集合中每个元素的前面的同胞元素，使用选择器进行筛选是可选的。

语法

.prevAll(selector)

posted @ 2020-08-24 17:08 zxhy哦阅读(1702) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

去吧,旋风冲锋龙卷风!

博客园文章生成目录

参考博客

Css

页首-作用生成右侧目录链接

页脚html代码

博客园-秒音天女

博客园-其他

小火柴代码

Context

Catalog

测试

版本

版本v1-右上角导航

版本v2--

//修改部分

版本v3--发布

页面定制css代码

页首html代码

页脚html代码

版本v4

功能：

代码分析

代码

页首的html代码

页脚

故障

版本v1-链接生成规则不一致

版本v2-h2标签取上级标签失败

版本v4-语法有问题

知识点

html语言

谷歌调试技巧

获取节点对象的相关节点

操作节点

在节点后面追加节点

给节点添加属性

调试

js注释

单行注释

多行注释

js语法

prevall