一个最简单的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. 有向强连通分支Tarjan算法

    本文转载自:http://blog.csdn.net/xinghongduo/article/details/6195337 说到以Tarjan命名的算法,我们经常提到的有3个,其中就包括本文所介绍的 ...

  2. java压缩文件出现中文乱码问题

    在项目中需要压缩文件下载,做完了发现有中文乱码问题,终于明白了. 引入ant.jar包 import org.apache.tools.zip.ZipEntry;   import org.apach ...

  3. vs2010中自动实现抽象方法

    由于刚接触vs,感官上虽然和eclipse差不多,但是一些快捷都不太相同,导致一开始使用时候非常不习惯. 不过刚开始嘛,写点相当小白的东西,也没有用到太多功能,也就暂时忽视,用的时候再说. 但是今天, ...

  4. web.xml中配置log4j

    1.将 commons-logging.jar和 log4j.jar加入你的项目中:2.在src/下创建log4j.properties|log4j.xml文件:3.在web.xml中配置log4j的 ...

  5. [c language] getopt

    getopt(分析命令行参数)     相关函数表头文件         #include<unistd.h>定义函数         int getopt(int argc,char * ...

  6. 用Dockerfile构建docker image

    dockerfile是为快速构建docker image而设计的,当你使用docker build 命令的时候,docker 会读取当前目录下的命名为Dockerfile(首字母大写)的纯文本文件并执 ...

  7. 重读LPTHW-Lesson18-21 函数

    1.def 定义函数,选取合适的函数名,原则是易于理解.阅读.函数名格式与变量命名格式相同,以字母开始,可以包含字母.数字.下划线.函数命名后,把参数放在()中,可以无参数.然后:结束函数命名,开始函 ...

  8. Lost Cows(BIT poj2182)

    Lost Cows Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10609   Accepted: 6797 Descri ...

  9. 傻瓜式硬盘重装win7系统图文加视频教程

    标准适用环境: win7系统还能用,但是想重装win7系统.[当然win7进不去也可以在PE进行] 其它 需要工具: win7 ISO镜像                          | [ w ...

  10. win7 Oracle 11g安装及安装中遇到的问题

    根据自己的系统从oracle官方下载安装包,官方地址:http://www.oracle.com/index.html win7的oracle 11g 安装包(2个): http://223.20.2 ...