TOP按钮

博客园页面添加返回顶部TOP按钮

  1. 进入网页管理->设置
  2. 在"页面定制CSS代码"中添加如下css样式,当然你可以改为自己喜欢的样式

    此处可以将背景色background-color改为:
    background:url(http://images.cnblogs.com/cnblogs_com/gitwow/1393973/o_o_o_toTop.png) no-repeat -70px top;
  3. 在"页脚Html代码"中添加如下代码,可以将文字改为图片
  • 此处<a href="#top">改为:#_labelTop,我的博客园好像没有#top
  • 锚点1文字TOP必须留着,才能跳转到锚点#_labelTop,而且也不知道怎么将文字改为图片??
  1. 点击保存按钮
    这样就在自己的页面添加了回到顶部的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按钮的更多相关文章

  1. jQuery制作go to top按钮

    转自:http://www.w3cplus.com/jquery/scrolling-to-the-top-with-jquery 每每看到网友Blog的页面底部或中间有一个按钮回到页面顶部,羡慕死人 ...

  2. JavaScript自动生成博文目录导航/TOP按钮

    博客园页面添加返回顶部TOP按钮 进入网页管理->设置 在"页面定制CSS代码"中添加如下css样式,当然你可以改为自己喜欢的样式 此处可以将背景色background-co ...

  3. 关于top按钮的网页设置

    方法一: 直接用html实现,没有缓冲的效果,直接彪到顶部. HTMl: <a id="return-top" href="#top"> <s ...

  4. 自定义置顶TOP按钮

    简述一下,分为三个步骤: 1. 添加Html代码 2. 调整Css样式 3. 添加Jquery代码 具体代码如下: <style type="text/css"> #G ...

  5. (转:亲测)cnblogs博文浏览[推荐、Top、评论、关注、收藏]利器代码片段

    authour: Others(hoojo) updatetime: 2015-04-25 09:30:23 friendly link: http://www.cnblogs.com/hoojo/a ...

  6. 实现返回top功能

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 【jQuery】scroll 滚动到顶部

    Jquery 实现页面滚动到顶端 $(document).ready(function () { // 滚动窗口来判断按钮显示或隐藏 $(window).scroll(function () { // ...

  8. jQuery学习笔记(控件位置定位、尺寸大小的获取等)

    想做一个幽灵按钮出来,效果大概如下图: 当点击按钮的时候,会有四根线条从四个方向飞入,经历从“无-有-无”的闪入过程. 那么我的设计想法是,先在HTML中定义一个按钮,然后在jQuery中设计按钮点击 ...

  9. JS学习知我见(常用建站代码)

    <!doctype html><html><head><meta charset="utf-8"><meta name=&qu ...

随机推荐

  1. golang实现aes-cbc-256加密解密过程记录

    我为什么吃撑了要实现go的aes-cbc-256加密解密功能? 之前的项目是用php实现的,现在准备用go重构,需要用到这个功能,这么常用的功能上网一搜一大把现成例子,于是基于go现有api分分钟实现 ...

  2. 部署ionic开发环境

    (1)安装Node.js 首先您需要安装 Node.js,后续会使用到其中的 NPM 工具. (2)安装JDK 需要安装JDK,官网下载安装.命令窗口中输入 java -Xmx2048m -versi ...

  3. Hibernate框架笔记02_主键生成策略_一级缓存_事务管理

    目录 0. 结构图 1. 持久化类的编写规则 1.1 持久化和持久化类 1.2 持久化类的编写规则 2. 主键生成策略 2.1 主键的分类 2.2 主键生成策略 3. 持久化类的三种状态[了解] 3. ...

  4. (五) Keras Adam优化器以及CNN应用于手写识别

    视频学习来源 https://www.bilibili.com/video/av40787141?from=search&seid=17003307842787199553 笔记 Adam,常 ...

  5. 正则表达式匹配html标签里面的内容

    假如html标签里面有一句:String a = "<style type=\"text/css\"> div \n" + "{ marg ...

  6. 基于python的种子搜索网站-开发过程

    本讲会对种子搜索网站的开发过程进行详细的讲解. 源码地址:https://github.com/geeeeeeeek/bt 项目开发过程 项目简介 该项目是基于python的web类库django开发 ...

  7. 小米平板6.0系统如何无ROOT激活xposed框架的步骤

    在较多企业的引流,或业务操作中,基本上都需要使用安卓的黑高科技术Xposed框架,近期,我们企业购买了一批新的小米平板6.0系统,基本上都都是基于7.0以上系统,基本上都不能够获得ROOT的su权限, ...

  8. 3Delight NSI: A Streamable Render API

    3Delight是应用于高端电影级别渲染的软件渲染器,迄今为止已经参与了无数的电影制作,具体可以参见链接. 如果你对3Delight的印象就依然是RenderMan的替代品,那就显然已经和时代发展脱节 ...

  9. JAVA 四舍五入Math.round方法

    今天由于测试场景,利息的计算中涉及小数点的保留.保留的规则是:两位小数+四舍五入方式 使用的语言是JAVA, 看了许多网上的方法.因为最后保留的小数还会进行计算.所以我考虑最好不要保留的结果是Stri ...

  10. 安装Docker时错误提示 "could not change group /var/run/docker.sock to docker: group docker not found"的解决方案

    安装Dock服务,主要命令是  yum install docker. 但是在启动的时候报错:warning msg="could not change group /var/run/doc ...