一个最简单的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. 利用glibc中锁结构的信息解决死锁问题

       首先非常感谢老丁和老李同学的帮助,没有他们这个问题估计又得搞很久.遇见这个问题,真是头疼.不熟悉代码.不熟悉流程,但是领导还是把活给排下来了(实在不解),只能硬着头皮找了. 问题是这样的,cac ...

  2. django中使用json.dumps处理数据时,在前台遇到字符转义的问题

    django后台代码: import json ctx['dormitory_list'] = json.dumps([{", "is_checked": 1}, {&q ...

  3. C++----练习--while求和

    1.完成1+2+3+...+99+100 #include<iostream> int main() { std::cout<<"本程序完成1 + 2 + 3 ... ...

  4. python----抽象类

    #!/usr/local/python3.5/bin/python3.5 ####实现方法一 class Supper(object): def delegate(self): self.action ...

  5. C#开发SQLServer的Geometry和Geography存储

    原文:C#开发SQLServer的Geometry和Geography存储 SQL Server2008推出后最大的变化就是提供了支持空间数据存储的Geometry和Geography,这个也是如果将 ...

  6. PhpEclipse插件

    PHP开发工具 PHPEclipse PHPEclipse 是一个相当强大的一个Eclipse下开发PHP的插件,包括的功能有:PHP语法分析,调试,代码格式化,大纲视图,代码模板定制等. 安装地址: ...

  7. FNN模糊神经网络——信息系统客户服务感知评价

    案例描述 信息系统是否真正减轻业务人员的日常工作量提高工作效率?如何从提供“被动”服务转变为根据客户感知提供“主动”服务,真正实现电网企业对信息系统服务的有效管理?如何构建一套适合企业的信息系统客户服 ...

  8. Remove Nth Node From End of List 解答

    Question Given a linked list, remove the nth node from the end of list and return its head. For exam ...

  9. openstacl compants CLI

    1,OpenStack tenant personality

  10. Unity屏幕射线碰撞

    Layers层: 从Layers设置看来,最多支持32层.  图层的值开始依次 0^2,1^2, 2^2, 3^3 依次增加. 当摄像机Culling Mask属性 Nothing= –1 Eveni ...