1.添加html

<div id="back-to-top">
<a href="javascript:;" title="返回顶部"><img src="/Images/top.png" alt=""/></a>
</div>

2.添加js代码

$(function () {
//当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
$(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$("#back-to-top").fadeIn(1500);
}
else {
$("#back-to-top").fadeOut(0);
}
}); //当点击跳转链接后,回到页面顶部位置
$("#back-to-top").click(function () {
$('body,html').animate({ scrollTop: 0 }, 1000);
return false;
});
});
});

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右下角返回顶部

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

  7. 简单的JQuery top返回顶部

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

  8. jQuery实现返回顶部功能

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

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

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

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

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

随机推荐

  1. ashMap源码阅读与解析

    目录结构 导入语 HashMap构造方法 put()方法解析 addEntry()方法解析 get()方法解析 remove()解析 HashMap如何进行遍历 导入语 HashMap是我们最常见也是 ...

  2. bzoj100题

    蒟蒻选手bzoj终于100题辣!!!好鸡冻啊!!! 200题大关也来了,不知道还要多久..

  3. java中使用fastjson、jackson、json-lib解析JSON-------------------妈妈再也不用担心JSON解析

    1.fastjson引入包<dependency> <groupId>com.alibaba</groupId> <artifactId>fastjso ...

  4. python object takes no parameters

    class Song(object): def __init__(self,lyrics): self.lyrics = lyrics def sing_me_a_song(self): for li ...

  5. 根据优先关系矩阵使用逐次加一发构造优先函数(Java)

    若已知运算符之间的优先关系,可按如下步骤构造优先函数: 1.对每个运算符a(包括#在内)令f(a)=g(a)=1 2.如果a⋗b且f(a)<=g(b)令f(a)=g(b)+1 3.如果a⋖b且f ...

  6. pdf.js实现在HTML下直接浏览pdf文档,无需插件即可实现

    近期,有一个朋友做B端,服务器存了大量的金融类数据,很多都是pdf文档,他现在的做法是,先将pdf文档转换成flash,再放到浏览器上给用户浏览,但是他告诉我,这种体验太差了,而且很好资源,空间已经快 ...

  7. MyBatis之TypeHandler

    在大学写web应用的时候经常会遇到这么个问题,当我要插入一条数据,某个数据是Date类型,数据库中却是VARCHAR类型,这个时候可能会傻乎乎的先把这个数据自己手动转换成String类型再插入到数据库 ...

  8. 【转】纯手工玩转 Nginx 日志

    Nginx 日志对于大部分人来说是个未被发掘的宝藏,总结之前做某日志分析系统的经验,和大家分享一下 Nginx 日志的纯手工分析方式. Nginx 日志相关配置有 2 个地方:access_log 和 ...

  9. android组团开发站立会议第三周第一次会议

    会议时间:组队开发第三周  星期一   开始时间晚上9:30-10:00 会议地点:学一食堂 二楼 到会人员:李志岩  王亚蕊 安帅 薛禄坤 张新宇 孙存良 会议概要:              1. ...

  10. 项目中的报错信息,maven报错等的总结

    Maven是一个自动化的构建和管理工具.在项目开发中,如果遇到了错误(红叉),一般有如下的解决方法: 1.java.lang.UnsatisfiedLinkError: E:\apache-tomca ...