一个最简单的JQuery Top返回的代码,Mark一下:

HTML如下:

 <div id="backtop">
<a href="javascript:;">TOP</a>
</div>

CSS样式:(随意修改样式)

#backtop{
display: none;
position: fixed;
right: 50px;
bottom: 110px;
}
#backtop a{
display: block;
padding: 10px 5px;
background:#59b524;
color: #fff;
font-size: 16px;
font-weight: bold;
}
#backtop a:hover{ background:#439b11; }

最关键的来了,JQuery如下:

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

OK。搞定!

简单的JQuery top返回顶部的更多相关文章

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

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

  2. JQuery 实现返回顶部效果

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

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

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

  4. 一句jQuery代码返回顶部

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

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

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

  6. jQuery实现返回顶部功能

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

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

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

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

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

  9. 【JavaScript&jQuery】返回顶部

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. (原)配置vs2013使用intel的IPP库

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5473890.html 参考网址: https://software.intel.com/en-us/n ...

  2. MYSQL存储过程中-流程控制语句

    存储过程中常用的流程控制 复习下存储过程内部的语法 定义存储过程体的局部变量: 定义方法:DECLARE a INT DEFAULT 100或者DECLARE   a INT ; SET a=100; ...

  3. iis10,php 5.2 isapi 扩展

    1.添加isapi映射模块: 2.设置独立应用程序池,注意php版本,5.2,要设置程序池32位. 64位下配置IIS+PHP出现404.17错误的解决办法

  4. 我的开源框架之Accordion控件

    需求: (1)实现手风琴面板控件,支持静态HTML与JSON方式创建控件 (2)支持远程加载数据 (3)支持面板激活.远程加载事件注册 (4)支持动态添加.删除项目 实现图例 客户代码 <div ...

  5. [Zookeeper研究]一 Zookeeper技术简介

    最近的项目中使用到了Zookeeper.Kafka以及Storm.仔细研究了一下,觉得这几个开源项目对于搞分布式的人来说是非常有用的,所以想把自己的一点心得体会总结一下,希望能对大家有所帮助. 首先从 ...

  6. BC 65 ZYB's Premutation (线段树+二分搜索)

    题目简述:有一个全排列,一直每个前缀区间的逆序对数,还原这个排列. fi记录逆序对数,pi记录该位置数值,则k=fi-f(i-1)表示前i-1个数比pi大的数的个数,那么只要在剩余元素求出按大小顺序第 ...

  7. leiningen安装记录

    Leiningen是Clojure项目管理工具Leiningen is the easiest way to use Clojure,官网:http://leiningen.org/ 1:首先下载Le ...

  8. BZOJ 1084 最大子矩阵

    http://www.lydsy.com/JudgeOnline/problem.php?id=1084 思路:分m=1和m=2操作 #include<algorithm> #includ ...

  9. C# 调用FFmpeg 根据图片合成视频

    1.项目结构: 2.代码: using System; using System.Collections.Generic; using System.Diagnostics; using System ...

  10. Linux系统编程(20)——信号基本概念

    信号及信号来源 信号是在软件层次上对中断机制的一种模拟,在原理上,一个进程收到一个信号与处理器收到一个中断请求可以说是一样的.信号是异步的,一个进程不必通过任何操作来等待信号的到达,事实上,进程也不知 ...