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. 浅析如何在Nancy中生成API文档

    前言 前后端分离,或许是现如今最为流行开发方式,包括UWP.Android和IOS这样的手机客户端都是需要调用后台的API来进行数据的交互. 但是这样对前端开发和APP开发就会面临这样一个问题:如何知 ...

  2. 图零直播新闻发布会—TOLINK2.0全面上线

    在网络直播时代和现代信息技术条件下,教务管理正在由传统管理方式向数字化管理模式转变.教务管理创新需要现代信息技术来实现,使得教务管理的质量和效率得到了质的飞跃.图零直播,中国IT在线直播教育引领者,在 ...

  3. 随机Prim法创建随机迷宫(C#实现)

    因为这两天想参加一个比赛,所以就在上网找素材,刚好看到了迷宫生成,就决定拿这个开刀了. 参考的原文地址为(来源页面) 源地址中是使用AS实现的,没学过AS,所以直接不会运行,于是就自己根据原文的概念进 ...

  4. WebGIS开源解决方案之开发环境搭建(一)

    工欲善其事,必先利其器,本文主要讲述WebGIS开源解决方案之环境搭建--geoserver的安装 安装方式一:tomcat环境下安装 从tomcat官网下载tomcat环境,下载链接:http:// ...

  5. WinForm界面布局

    一直很羡慕和佩服园子中伍华聪的界面设计和布局.好多年都没有真正写过C/S项目了,今天翻出来6年前刚开始学习WinForm的时候写的一个简单的HR管理系统,思绪一下子很复杂,记得是6年前的夏天,天气很热 ...

  6. 窝上课不听,how to learn C language easily(1)

    C language 学习心得 附:为啥起这么霸气侧漏,招大神们鄙视的标题,正如我在<C language>随笔的介绍中写的,这是一个写个妹纸们看的C language的文章.没错!!写这 ...

  7. OC中的私有变量和私有方法

    在类的实现即.m文件中也可以声明成员变量,但是因为在其他文件中通常都只是包含头文件而不会包含实现文件,所以在.m文件中声明的成员变量是@private得.在 .m中定义的成员变量不能和它的头文件.h中 ...

  8. HDU4497GCD and LMC最大公约数与最小公倍数

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4497 题目大意: 求gcd(x,y,z)=G且lcm(x,y,z)=L的方法数. 题目分析: 起初这 ...

  9. Docker+SpringBoot+Mybatis+thymeleaf的Java博客系统开源啦

    个人博客 对于技术人员来说,拥有自己的个人博客应该是一件令人向往的事情,可以记录和分享自己的观点,想到这件事就觉得有意思,但是刚开始写博客的时候脑海中是没有搭建个人博客这一想法的,因为刚起步的时候连我 ...

  10. Oracle 12C 新特性之表分区部分索引(Partial Indexes)

    12c之前没办法在部分或指定的分区上创建索引,12c 版本中引入了Partial Indexes(部分索引), 无论是global还是local都可以有选择性的对部分分区创建索引.分区上有索引用索引, ...