TOP按钮
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时也可以实现返回顶部的效果了。TO锚点1
要想让返回顶部的图片显示在右侧,还需要一些css样式,如下:
一般的Markdown编辑器如果我们想实现页内跳转可以这样做:
定义锚点:<span id="des">destination</span>
定义跳转:[jump] (#des)
现在以下方法也不能使用了。所以简书的小伙伴们,放弃吧
但这套做法在简书的Markdown上就行不通了,锚点定义部分会原样输出。
简书上利用a标签也能实现跳转,但是会打开新的页面,这就难以接受了。
在简书上实现页面内的锚点跳转方法:
定义跳转:<a href="#label">点击跳转</a>
中间是长长的一段,此处省略一万字.....
定义锚点:<a id="label">跳到这里来</a>
【锚点简介】
锚点是网页制作中超级链接的一种,又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍。
英文名:anchor
使用命名锚记可以在文档中设置标记,这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接,这些链接可快速将访问者带到指定位置。
创建到命名锚记的链接的过程分为两步。首先,创建命名锚记,然后创建到该命名锚记的链接。
【锚点用法】
- 建立一个跳转的连接:
[说明文字](#jump) - 标记要跳转到的位置
<span id = "jump">跳转到这里:</span>
TOP按钮的更多相关文章
- jQuery制作go to top按钮
转自:http://www.w3cplus.com/jquery/scrolling-to-the-top-with-jquery 每每看到网友Blog的页面底部或中间有一个按钮回到页面顶部,羡慕死人 ...
- JavaScript自动生成博文目录导航/TOP按钮
博客园页面添加返回顶部TOP按钮 进入网页管理->设置 在"页面定制CSS代码"中添加如下css样式,当然你可以改为自己喜欢的样式 此处可以将背景色background-co ...
- 关于top按钮的网页设置
方法一: 直接用html实现,没有缓冲的效果,直接彪到顶部. HTMl: <a id="return-top" href="#top"> <s ...
- 自定义置顶TOP按钮
简述一下,分为三个步骤: 1. 添加Html代码 2. 调整Css样式 3. 添加Jquery代码 具体代码如下: <style type="text/css"> #G ...
- (转:亲测)cnblogs博文浏览[推荐、Top、评论、关注、收藏]利器代码片段
authour: Others(hoojo) updatetime: 2015-04-25 09:30:23 friendly link: http://www.cnblogs.com/hoojo/a ...
- 实现返回top功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【jQuery】scroll 滚动到顶部
Jquery 实现页面滚动到顶端 $(document).ready(function () { // 滚动窗口来判断按钮显示或隐藏 $(window).scroll(function () { // ...
- jQuery学习笔记(控件位置定位、尺寸大小的获取等)
想做一个幽灵按钮出来,效果大概如下图: 当点击按钮的时候,会有四根线条从四个方向飞入,经历从“无-有-无”的闪入过程. 那么我的设计想法是,先在HTML中定义一个按钮,然后在jQuery中设计按钮点击 ...
- JS学习知我见(常用建站代码)
<!doctype html><html><head><meta charset="utf-8"><meta name=&qu ...
随机推荐
- keil教程之新建软件工程
前言 工欲善其事,必先利其器.要学好52单片机,就要会用keil写程序.不然,谈何学习单片机.下面介绍keil的使用. keil简介 Keil C51是美国Keil Software公司出品的51系列 ...
- 盘点 Python 中的那些冷知识(二)
上一篇文章分享了 Python中的那些冷知识,地址在这里 盘点 Python 中的那些冷知识(一) 今天将接着分享!! 06. 默认参数最好不为可变对象 函数的参数分三种 可变参数 默认参数 关键字参 ...
- AngularJS 截取字符串
参考文章:https://blog.csdn.net/u010234516/article/details/54631525 //过滤器 app.filter('textLengthSet', fun ...
- phpcms V9 二次开发------(获取点击数详解)
关于phpcms V9的点击数的使用应该有不少数是直接调用网上搜索到的代码,但是对于一些想要深入研究开发的人来说,看到网上的代码后更是不解,本人这几天看了看,了解了一些东西,在这里写出来分享一下,首先 ...
- Django学习之九: auth 认证组件
目录 Django auth 认证组件 配置使用auth组件及其中间件 request.user 可以直接在template模版中使用 auth组件常用api 获取认证model类 认证检测装饰器@l ...
- [目录]C#学习笔记
C#是微软.NET平台下最重要的编程语言,它与C.C++不同,C#编写的源程序是托管在.NET平台下的.C#源程序经C#编译器编译成中间语言(IL,Intermediate Language),再经C ...
- arcgis api 3.x for js 入门开发系列十八风向流动图(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- Jmeter分布式部署
当单机没有足够能力来模拟较重的负载,可以使用jmeter分布式测试功能, 通过一个Jmeter控制台来远程控制多个Jmeter引擎完成测试. 每个线程均独立运行测试计划.因此,线程组常用来模拟并发用户 ...
- 扫码下单与ERP客户端锁桌功能FAQ
一.需求场景:因为目前客户端和平台端有两套数据库,两套数据库通过网络交互信息,且双方都可以发起支付,这种结构容易造成: 1.一笔订单同时支付.一笔订单支付时未按最新订单进行支付,支付多付.支付少付的情 ...
- C# 直接引用js文件,调js里的数据
C# 直接引用js文件,调js里的数据 引入命名空间 using System.IO; string path = AppDomain.CurrentDomain.BaseDirectory + &q ...