JavaScript自动生成博文目录导航/TOP按钮
博客园页面添加返回顶部TOP按钮
进入网页管理->设置
- 在"页面定制CSS代码"中添加如下css样式,当然你可以改为自己喜欢的样式
此处可以将背景色background-color
改为:
background:url(http://images.cnblogs.com/cnblogs_com/gitwow/1393973/o_o_o_toTop.png) no-repeat -70px top;
- 在"页脚Html代码"中添加如下代码,可以将文字改为图片
- 此处
<a href="#top">
改为:#_labelTop
,我的博客园好像没有#top
- #1文字TOP必须留着,才能跳转到锚点
#_labelTop
,而且也不知道怎么将文字改为图片??
- 点击保存按钮
这样就在自己的页面添加了回到顶部的Top按钮
利用jQuery制作带动画版本的跳转
- 首先需要在顶部添加如下html元素:
其中a标签指向锚点top,可以在顶部放置一个<a name="top"></a>
的锚点,这样在浏览器不支持js时也可以实现返回顶部的效果了。#1
- css样式
要想让返回顶部的图片显示在右侧,还需要一些css样式,如下(页面定制CSS代码
):
#back-to-top {background:transparent url(http://images.cnblogs.com/cnblogs_com/gitwow/1393973/o_o_o_toTop.png) no-repeat -70px top;width:57px;height:57px;overflow:hidden;position:fixed;right:0px;bottom:0px;cursor:pointer;
}
页脚Html代码
//回到页顶的代码(JS)-------------------------------------------------------
JavaScript自动生成博文目录导航
参考:JavaScript自动生成博文目录导航 - 孤傲苍狼 - 博客园
1.JavaScript实现方式:
实现原理:首先通过调用DOM方法,判断出浏览器滚动条(scroll bar)的当前位置,记为currentPos;然后计算出目标标题(target title)的距页面顶端的距离,记为finalPos;最后通过一定的算法实现平滑过度。
2.源代码
下面是这个JS工具的相关源代码:
2.1 js代码<u>**页首Html代码**</u>
修改如下:(#2)
2.2. CSS样式代码<u>**页面定制CSS代码**</u>
/*生成博客目录的CSS*/ #sideBar{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; }
#2由于该css与原有的css部分同名冲突,故修改如下:
sideBar
--->
uprightsideBar
sideBarTab--->
uprightsideBarTab
sideBarContents--->
uprightsideBarContents
为博客园添加目录的配置总结
锚点
一般的Markdown编辑器如果我们想实现页内跳转可以这样做:
定义锚点:<span id="des">destination</span>
定义跳转:[jump] (#des)
现在以下方法也不能使用了。所以简书的小伙伴们,放弃吧
但这套做法在简书的Markdown上就行不通了,锚点定义部分会原样输出。
简书上利用a标签也能实现跳转,但是会打开新的页面,这就难以接受了。
在简书上实现页面内的锚点跳转方法:
定义跳转:<a href="#label">点击跳转</a>
中间是长长的一段,此处省略一万字.....
定义锚点:<a id="label">跳到这里来</a>
【锚点简介】
锚点是网页制作中超级链接的一种,又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍。
英文名:anchor
使用命名锚记可以在文档中设置标记,这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接,这些链接可快速将访问者带到指定位置。
创建到命名锚记的链接的过程分为两步。首先,创建命名锚记,然后创建到该命名锚记的链接。
【锚点用法】
- 建立一个跳转的连接:
[说明文字](#jump)
- 标记要跳转到的位置
<span id = "jump">跳转到这里:</span>
dl,dt,dd标签的使用
dl,dt,dd标签的使用 - 都市烟火 - 博客园
定义和用法:
<dl>标签定义了定义列表(definition list)。
<dl>标签用于结合<dt>(定义列表中的项目)和<dd>(描述列表中的项目)。
dl:定义列表应该是definition list的缩写
dt:定义标题,所以应该是definition title的缩写
dd:描述用的,所以应该是definition description的缩写
转载于:https://www.cnblogs.com/gitwow/p/10393166.html
JavaScript自动生成博文目录导航/TOP按钮相关推荐
- JavaScript自动生成博文目录导航
http://www.cnblogs.com/xdp-gacl/p/3718879.html 为博客园添加目录的配置总结 http://www.cnblogs.com/jiangz/p/3734968 ...
- [转]JavaScript自动生成博文目录导航
转自:http://www.cnblogs.com/xdp-gacl/p/3718879.html 我们在写博客的时候,如果博文里面有目录,会给人结构清晰.一种一目了然的感觉,看目录就知道这篇博文要讲 ...
- JavaScript:自动生成博文目录导航
感谢 孤傲苍狼 分享了 自动生成博文目录的方法,本文仅作存档使用. 图 1:效果预览 CSS 样式 #TOCbar{font-size:12px; text-align:left; position: ...
- Jquery实现自动生成二级目录
在博客园开通博客以后,就看到某位博友写的js自动生成目录的文章,当时觉得生成目录能给阅读带来方便,所以就直接拿来使用了.用了一段时间以后,发现只能生成一级目录,不能生成多级目录,有点美中不足.所以想着 ...
- 大论文 自动生成标题目录、图目录和表目录
大论文 自动生成标题目录.图目录和表目录 到了写大论文的时间啦,结果卡在了目录生成这里,各种小问题,网上找了找,没有一个较为系统地说明,花费了一些时间,在这里系统地介绍一下. 标题目录自动生成 1.刚 ...
- 根据文章中H标签自动生成文章目录
以前看到csdn上的目录结构就想把它移植到博客里,今天抽了个空从csdn上拔下了代码. js代码,复制放入到single.php页面中 <script type="text/javas ...
- TP自动生成模块目录
TP自动生成模块目录 例如我想在项目中增加一个AdminI模块 只需要在入口文件index.php中添加: define('BIND_MODULE','Admin'); 再访问127.0.0.1项目就 ...
- word中自动生成的目录中,编号和文本间距过大
问题: word中自动生成的目录中,编号和文本间距过大,如下图所示: 解决办法: 在正文中,调整列表缩进--更多--编号之后--设置为"空格". 如果经过1步骤后,正文中的编号和后 ...
- 根据H标签自动生成多级目录
根据H标签自动生成多级目录 这个问题分为两步 将标签的层级关系生成树结构 递归遍历树结构,使用ol li嵌套生成多级目录 <h2>一级标题1</h2> 1. 一级标题1 < ...
最新文章
- jquery过滤HTML标签方法
- pandas使用idxmax函数获取dataframe每个数据行中最大值对应的列名称(column label of max value in each row in dataframe)
- java图像处理之幂律变换
- hdu 4454 Stealing a Cake 三分法
- 监视和排错客户端性能和连接性
- php 环状,CSS3能写出这种环状吗,不是环形进度条?
- for update在mysql中使用
- 服务器的系统搭建,服务器系统搭建
- 系统分区 ,硬盘格式化,
- 简单好用一键恢复丢失办公文档
- c语言设计题库及详解答案,(完整版)C语言程序设计题库及答案,推荐文档
- Python-计量经济学案例
- JAVA面试技巧之自我介绍
- Windows10自带应用的卸载和恢复
- 大数据技术之Hive 第6章 查询 基本查询
- Sia 对比 Storj 对比 MaidSAFE
- 前端 - excel导入 / 导出功能
- 最全小说资源网——连载阅读升级版(亲测好用)
- Stata绘图:多维柱状图绘制
- Js——ScrollTop、ScrollHeight、ClientHeight、OffsetHeight汇总
热门文章
- PHP单元测试使用手册
- 给大家几个不花钱看书的办法【人人都是产品经理】
- Building Seam 2.0 Application with NetBeans 6.1
- MetaWeblog API中文说明
- Introduction to Financial Management
- 关于hive数仓这个概念的一些理解+查看hive底层引擎是否是tez
- java class类型参数_java – 如何从通用类型参数获取`.class`属性?
- 深度学习(十四)——Softmax详解, 目标检测, RCNN
- android 动态调用apk,通过反射动态加载未安装apk
- linux查看redis索引,linux的redis操作命令