博客园添加目录,导航,回到顶部
申请JS
首先你要去自己的设置,申请js权限
目录
页首HTML代码
<script type="text/javascript">
/*功能:生成博客目录的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 h1 = document.createElement('H2');divSideBarTab.appendChild(h1);var txt = document.createTextNode('目录导航');h1.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和stmt = 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","h1","h2",20);
}
</script>
页面定制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;
}
回到顶部
页面定制CSS代码
/*回到顶部*/
#back-to-top123 {background-color: #00CD00;bottom: 0;box-shadow: 0 0 6px #00CD00;color: #444444;padding: 10px 10px;position: fixed;right: 50px;cursor: pointer;
}
页脚HTML代码
<span id="back-to-top123"><a href="#top">回到顶部</a></span>
博客园添加目录,导航,回到顶部相关推荐
- 博客园_01_为博客园添加目录的方法总结
本文转自:作者:妙音天女 地址:http://www.cnblogs.com/xuehaoyue/p/6650533.html 目录 第一种:在正文上方直接添加目录 1. 申请开通js权限 2. ...
- 为博客园添加github跳转链接
一般程序员都会有自己的github仓库,在博客园添加跳转链接,可以很方便的进行访问查看. 添加html 首先,需要在设置中添加一段html,用于跳转链接 <a class="git-l ...
- 博客园添加live2D看板娘和樱花飘落背景
写在前面 本文主要描述了怎么给博客园添加看板娘和樱花飘落特效,文章可能还有很多不足,请大家谅解,欢迎大佬提意见. 本文使用的东西 live2d(看板娘) 樱花飘落 博客园 文章目录 写在前面 本文使用 ...
- 博客园添加鼠标粒子吸附特效
本文从以下三个方面, 阐述在博客园添加鼠标粒子吸附特效: 一. 效果展示 二. 权限申请 三. 设置步骤 一. 效果展示 在博客园的页面, 出现鼠标粒子吸附的特效, 如图所示: 二. 权限申请 点击博 ...
- css文件插入背景音乐,博客园添加背景音乐,背景效果!
博客园添加背景音乐,背景效果 申请博客园js权限 申请话术 实例 尊敬的博客园管理员: 请求申请开通js权限,希望能够把自己的博客修饰的漂亮点,点缀自定义js插件效果,希望管理员可以批准,谢谢! 开通 ...
- 【分享】给自己的博客园添加一个板娘(可选)
全部样式分享 更换模型的话只需要更换jsonpath中的模型名称即可 https://unpkg.com/live2d-widget-model-模型名称/assets/模型名称.model.json ...
- 如何为你的博客园添加到百度统计
1.打开百度统计的地址 https://tongji.baidu.com/web/welcome/login?castk=LTE%3D 2.注册,打开网址后,右面有注册按钮,点击注册 选择站长版,点击 ...
- 给自己的博客园添加网抑云音乐播放器
1. 申请权限 首先给自己的博客园设置,申请js权限,这个教程可以去搜. 2. 打开网页版网抑云音乐 点击一首你喜欢的歌进入 , 然后点击生成外链播放器 然后复制代码: 进入到自己的博客园设置页面 我 ...
- 在博客园添加Lisp(或其它)代码高亮
由于我这一段对Emacs很有兴趣,发了不少关于这玩意儿的文章.但博客园的代码高亮并不支持Emacs Lisp,之前一直也没怎么管,前几天看见李杀的这篇 Syntax Coloring with Goo ...
最新文章
- 容器,你还只用Docker吗?(下)
- hdu 3183 A Magic Lamp(给一个n位的数,从中删去m个数字,使得剩下的数字组成的数最小(顺序不能变),然后输出)...
- Ubuntu 安装 Tomcat 7.0.40
- Android官方开发文档Training系列课程中文版:高效显示位图之管理位图内存
- 阿帕奇链接mysql_apache guacamole 使用mysql 连接
- AD服务器不愿意处理该请求
- [BZOJ5286][HNOI2018]转盘(线段树)
- Spring Boot 2.1.4 发布,提醒全体用户升级 2.1
- Zookeeper与Kafka集群搭建
- 《Java基础入门第2版》--黑马程序员 课后答案及其详解 第1章 Java开发入门
- (1)pytorch 实现 minist手写数据集(cpu/gpu)版本
- 计算机桌面有阴影,电脑桌面图标有阴影怎么去掉
- 电视行业和政策发展历程
- 如何破解Aspose.word带水印问题
- CCF-201409-5-拼图
- 【JS】 # js获取当前日期,比较日期大小
- Word字体的字号与像素对应关系
- 计算机传奇人物之詹姆斯.高斯林
- 莱布尼兹乘积微分公式证明纠错
- 英语面试最实用的五大技巧
热门文章
- 在Mac上模拟IE浏览器
- Android oppo手机显示安装包异常(Bug6)
- 深度学习论文阅读目标检测篇(四)中英文对照版:YOLOv1《 You Only Look Once: Unified, Real-Time Object Detection》
- python-数据分析-pandas (1)
- 禅道如何设置邮箱提醒
- linux如何注销远程用户登录,Linux无法被远程登录;用户的关机, 重启,注销,新增用户,删除用户...
- 樊登读书会极致读后感_【学习部落】樊登读书会可复制的领导力感悟
- |Boids|鸟群模型|鸟群算法|学习笔记 - 论文学习
- 目标检测YOLO实战应用案例100讲-基于多尺度特征融合的水下小目标检测方法研究
- 2、基因树 与物种树的关系及建树