实现的效果也就是,当有滚动条是,滚动条未动或与顶部距离小于多少像素是,返回顶部按钮处于隐身状态,当滚动条与顶部距离大于一定像素时,返回顶部按钮出现,实现点击‘返回按钮’后,从当前位置回到等不位置。要先引用jquery.min.js

  1. <script src="__PUBLIC__/js/jquery-2.1.4.min.js"></script>

html:

  1. <div id="back-to-top" style="display:none"><br /><br /><br /></div>

css:

  1. #back-to-top{
  2. width: 25px;position:fixed;bottom:20px;right:20px;border:solid 1px #ccc;cursor:pointer;text-align: center;color: red;
  3. _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
  4. }

js:

  1. jQuery(function ($) {
  2. //当滚动条的位置处于距顶部20像素以下时,跳转链接出现,否则消失
  3. $(window).scroll(function(){
  4. if (jQuery(window).scrollTop()>20){
  5. jQuery("#back-to-top").fadeIn(1000);
  6. }
  7. else
  8. {
  9. jQuery("#back-to-top").fadeOut(1000);
  10. }
  11. });
  12.  
  13. //当点击跳转链接后,回到页面顶部位置
  14.  
  15. jQuery("#back-to-top").click(function(){
  16. jQuery('body,html').animate({scrollTop:0},1000);
  17. return false;
  18. });
  19. });

jquery右下角返回顶部的更多相关文章

  1. 一句jQuery代码返回顶部

    一句jQuery代码返回顶部 效果体验: http://hovertree.com/texiao/yestop/ 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: ...

  2. js+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a  ...

  3. JQuery 实现返回顶部效果

    首先要里了解一下几个知识 $(window).scrollTop() ---滚动条距顶部距离 fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的. fadeOut() 方法使用淡出效 ...

  4. javascript+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...

  5. 转载:jQuery实现返回顶部功能

    转自:http://blog.csdn.net/itmyhome1990/article/details/25340705 整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图   ...

  6. jQuery实现返回顶部功能

    整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图               第一种实现 一.JSP或HTML(主体结构) 在body中添加 <body id=" ...

  7. 简单的JQuery top返回顶部

    一个最简单的JQuery Top返回的代码,Mark一下: HTML如下: <div id="backtop"> <a href="javascript ...

  8. 使用jquery实现返回顶部按钮

    实现返回顶部效果,首先需要监听页面的scroll事件,其次才是获取到页面当前的滚动高度 $(window).scrollTop(); 具体代码如下: jquery获取页面元素的一些边界值(宽,高,滚动 ...

  9. 使用jQuery实现返回顶部功能

    <p id="back-to-top"><a href="#top"><span></span>返回顶部< ...

随机推荐

  1. "判断this指针是不是null有什么意义呢"

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:"判断this指针是不是null有什么意义呢".

  2. Java RMI之介绍

    http://zh.wikipedia.org/wiki/Java_RMI Java远程方法调用,即Java RMI(Java Remote Method Invocation)是Java编程语言里, ...

  3. careercup-递归和动态规划 9.7

    9.7 编写函数,实现许多图片编辑软件都支持的“填充颜色”功能.给定一个屏幕(以二维数组表示,元素为颜色值).一个点和一个新的颜色值,将新颜色值填入这个点的周围区域,直到原来的颜色值全部改变. 类似l ...

  4. Copy-On-Write技术 (摘录)

    Copy-On-Write技术     Copy-On-Write是写时才copy的意思,有延迟操作的意思在里面.比如往磁盘写数据,先写到的是内存里面,只有文件close或flush时才真正写到磁盘. ...

  5. oracle修改字段类型

    有一个表名为tb,字段段名为name,数据类型nchar(20). 1.假设字段数据为空,则不管改为什么字段类型,可以直接执行:alter table tb modify (name nvarchar ...

  6. mysqldump导出csv格式文件

    mysqldump bstar -t  -T/tmp Nvr  --fields-enclosed-by=\" --fields-terminated-by=, --where=" ...

  7. Java并发——ReentrantLock类源码阅读

    ReentrantLock内部由Sync类实例实现. Sync类定义于ReentrantLock内部. Sync继承于AbstractQueuedSynchronizer. AbstractQueue ...

  8. JAVA锁的可重入性

    机制:每个锁都关联一个请求计数器和一个占有他的线程,当请求计数器为0时,这个锁可以被认为是unhled的,当一个线程请求一个unheld的锁时,JVM记录锁的拥有者,并把锁的请求计数加1,如果同一个线 ...

  9. Magento 中的多个类别的筛选产品集合

    通过在 Magento 中的多个类别的筛选产品集合. 按只 1 类别筛选 Magento 提供筛选器,可以使用直接从该集合的类型: $_category = Mage::getModel('catal ...

  10. HTML 学习整理

    一.名词解释 一.  HTML : Hypertext Markup Language  超文本标记语言 二.  CSS : Cascading Style Sheet  层叠样式表 三.  浏览器: ...