1.添加返回小火箭

页脚Html代码
<span id="back-to-top"><a href="#top"><img src="https://files.cnblogs.com/files/makexu/gotop.gif" style="width:100px;height:100px;"></a></span>

页面定制CSS代码
/*回到顶部*/
#back-to-top {bottom: 0;padding: 5px 5px;position: fixed;right: 2px;cursor: pointer;
}

2.添加目录

页脚html代码
<script language="javascript" type="text/javascript">
// 生成目录索引列表
// 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 h4');//如果你的章节标题不是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("h5");var li3_content = '';for(var j=0; j<h3_list.length; j++){var tmp = $(h3_list[j]).prevAll('h4').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>';elseli2_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/makexu/p/7701082.html

添加底部小火箭+目录相关推荐

  1. 微信小程序怎么添加底部菜单按钮

    继续微信小程序方面的教程,今天讲怎么在空白的小程序页面添加几个类似菜单的按钮,实现点击某个按钮跳转到对应界面,而不是单单局限于一个页面. 需要什么: 微信小程序账户 电脑一台 电脑安装微信开发者工具软 ...

  2. 微信小程序添加底部导航栏

    我们平时上微信可以看到,微信的底部是4个导航栏选项进行切换的,我们自己开发小程序时,如果要添加像微信那样的底部导航栏的话,其实实现方式非常简单,便捷. 在微信小程序开发IDE中,我们新建一个小程序项目 ...

  3. Android桌面悬浮窗进阶,QQ手机管家小火箭效果实现

    这次我们将代码的重点放在火箭升空的效果上,因此简单起见,就直接在模仿360手机卫士悬浮窗的那份代码的基础上继续开发了,如果你还没有看过那篇文章的话,建议先去阅读 Android桌面悬浮窗效果实现,仿3 ...

  4. Android开发实战《手机安全卫士》——7.“高级工具”模块结尾 小火箭动画

    文章目录 1.高级工具--Toast提示框的双击事件 2.高级工具--服务中处理Toast提示框的拖拽事件 3.拓展功能--小火箭需求分析 4.拓展功能--小火箭的业务实现 1.高级工具--Toast ...

  5. [填坑手册]小程序目录结构和组件化使用心得

    小程序目录结构 关于小程序的目录结构,可以说一开始大家都有各自的开发习惯和命名规则,但一旦项目变得复杂庞大的时候,你就发现管理起来和后期维护变得很麻烦,如果是 协同开发 的话,更容易出现 " ...

  6. 拖拽升空的Android小火箭

    先上演示效果 1.MainActivity 主布局就两个Button按钮 :一开启.二关闭 就不贴主布局xml了 因为小火箭是游离在activity之外的,所以不能依赖activity的生命周期 需要 ...

  7. 360悬浮加速小火箭,内存清理,加速缓存

    360悬浮加速小火箭,内存清理,加速缓存 关于我 最近时间都比较的紧,处理不同项目的BUG,今天偷得半日闲,把剩下项目的一部分扔给了组长.有个问题没解决,做了两天也没完成,实在是没有办法了.也很感谢, ...

  8. Android仿腾讯手机管家实现桌面悬浮窗小火箭发射的动画效果

    功能分析:  1.小火箭游离在activity之外,不依附于任何activity,不管activity是否开启,不影响小火箭的代码逻辑,所以小火箭的代码逻辑是要写在服务中:  2.小火箭挂载在手机窗体 ...

  9. android桌面小火箭升空动画

    1 public class MainActivity extends Activity { 2 @Override 3 protected void onCreate(Bundle savedIns ...

最新文章

  1. 把对象转换成JSON字符串 第二稿支持移动设备
  2. 统计字符串中单词个数
  3. Idea+springcloud+zookeeper做的服务发现和远程连接zookeeper
  4. ICLR2021 | 唯一录取的NER论文:NER数据存在漏标怎么办?
  5. 页面动态加载android,Android APP启动页面动态加载全部权限
  6. C++ queue队列如何遍历
  7. html数字什么字体样式,css字体样式属性有哪些?
  8. CAD图纸管理,CAD图纸高效的管理解决方案
  9. mysql 数据库修改ip_mysql数据库学习之修改主库ip地址
  10. opensips服务端搭建
  11. Flink无法在yarn提交任务:取消检查虚拟内存
  12. antony.net
  13. 移动平台动画设计的12个原则
  14. 超火表白代码,心心(html+css)
  15. 一朝春尽红颜老,花落人亡两不知.
  16. android 收音机调频,FM手机调频收音机
  17. 模块和包管理工具npm
  18. 关于解决HbuilderX终端不能输入问题
  19. 英文版-献上感恩的心-Give Thanks(风景图)
  20. 苹果字体怎么改_LED显示屏屏幕上的文字怎么改?

热门文章

  1. 【转】 i2c驱动调试经验
  2. [C#]自定义鼠标样式
  3. 农历算法-ASP.NET(C#)(转)
  4. Android 屏幕适配攻略(一)
  5. Mr.J--验证码登陆模块
  6. Oracle和Mysql中的字符串的拼接
  7. 将一个包含汉字的字符串逐个转化为数字,并得出该字符串的十进制和
  8. WinForm 修改App.config不起作用(但是调试没有异常)
  9. [示例] 使用 TStopwatch 计时
  10. 【多项式求逆】[BZOJ3456]城市规划