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 ...
随机推荐
- [Javascript] encodeURIComponent()方法
在vue項目中使用vue-router通过url进行传值 encodeURIComponent encodeURIComponent() 函数可把字符串作为 URI 组件进行编码.encodeURIC ...
- 改行了,学C#
C#数组: 定义方法 ]; ,]; //这个是二维数组 只有这一种定义方法,不像java有多种定义方法.等号前面在栈中初始化类型为一维数组类型(int[])或二维数组类型(int[,])的存储堆中地址 ...
- 简简单单的Vue2(简单语法,生命周期,组件)
既然选择了远方,便只顾风雨兼程! __HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 简单入手 组件 在上面文章,我们简单的讲了前端框架的工程化,也就是MVVM,还有特别聊 ...
- 【Redis】LRU算法和Redis的LRU实现
LRU原理 在一般标准的操作系统教材里,会用下面的方式来演示 LRU 原理,假设内存只能容纳3个页大小,按照 7 0 1 2 0 3 0 4 的次序访问页.假设内存按照栈的方式来描述访问时间,在上面的 ...
- Java多线程知识整理
多线程 1. 多线程基础 多线程状态转换图 普通方法介绍 yeild yeild,线程让步.是当前线程执行完后所有线程又统一回到同一起跑线.让自己或者其他线程运行,并不是单纯的让给其他线程. join ...
- su和sudo的区别
首先来说一下su 然后是sudo
- 自动化测试 Appium之Python运行环境搭建 Part1
Appium之Python运行环境搭建 Part1 by:授客 QQ:1033553122 实践环境 Win7 Python 3.4.0 JAVA JDK 1.8.0_121 node.js8.11. ...
- Java数据解析之XML
文章大纲 一.XML解析介绍二.Java中XML解析介绍三.XML解析实战四.项目源码下载 一.XML解析介绍 最基础的XML解析方式有DOM和SAX,DOM和SAX是与平台无关的官方解析方式 ...
- 【English】十六、时间相关
〇.其他 date: I have a date with her tomarrow. n.约会;日期,日子;时代,年代; vt.过时;使…显老;显示出…时代(或年龄);鉴定…的年代 vt.& ...
- 深入浅出KNN算法(一) KNN算法原理
一.KNN算法概述 KNN可以说是最简单的分类算法之一,同时,它也是最常用的分类算法之一,注意KNN算法是有监督学习中的分类算法,它看起来和另一个机器学习算法Kmeans有点像(Kmeans是无监督学 ...