<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>返回顶部</title>
    <style type="text/css">
         *{
             margin: 0;
             padding: 0;
         }
         .wrap{
             height: 2000px;
         }
         .gotop{
             display: block;
             width: 32px;
             height: 32px;
             background-color: red;
             text-align: center;
             text-decoration: none;
             font-size: 14px;
             font-weight: bold;
             color: white;
             line-height: 32px;
             position: fixed;
             right:50px;
             bottom:50px;
             opacity: 0;
             /*top: 500px;*/
         }
    </style>
</head>
<body>
      <div class="wrap">
             <a href="###" class="gotop">TOP</a>
      </div>
      <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
      <script type="text/javascript">
        $(function(){
                 // 当滚动条滚动大于200时出现，未大于，消失
                 $(window).scroll(function(){
                     if($(document).scrollTop()<200){
                         // alert("kk");
                         $(".gotop").stop().animate({
                              
                                  opacity: 0
                                 
                         },1000)
                     }
                     else{
                         $(".gotop").show().stop().animate({
                                  
                                  opacity: 1
                                 
                         },1000)
                     }
                })
             // 返回顶部
             $(".gotop").on("click",function(){
                   $("html body").animate({
                          scrollTop:0
                   },1000)
             })
        })
      </script>
</body>
</html>

Jquery 返回顶部的更多相关文章

  1. jquery返回顶部，支持手机

    jquery返回顶部,支持手机 效果体验:http://hovertree.com/texiao/mobile/6/ 在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的 ...

  2. jQuery返回顶部（精简版）

    jQuery返回顶部(精简版) <!DOCTYPE html><html lang="en"><head> <meta charset=& ...

  3. jQuery返回顶部实用插件YesTop

    只需一句jQuery代码实现返回顶部效果体验:http://hovertree.com/texiao/yestop/ 使用方法:只需引用jQuery库和YesTop插件(jquery.yestop.j ...

  4. jquery返回顶部和底部插件和解决ie6下fixed插件

    (function($){ //返回顶部和底部插件 $.fn.extend({ goTopBootom:function (options){ //默认参数 var defaults = { &quo ...

  5. Jquery返回顶部插件

    自己jquery开发的返回顶部,当时只为了自己用一下,为了方便,修改成了插件... 自己的博客现在用的也是这个插件..使用方便!! <!DOCTYPE html> <html> ...

  6. jquery 返回顶部 兼容web移动

    返回顶部图片 http://hovertree.com/texiao/mobile/6/tophovertree.gif 具体实现代码 <span id="tophovertree&q ...

  7. jquery返回顶部特效

    <style> p#back-to-top{position:fixed; bottom:100px;right:10px; display: none; } p#back-to-top ...

  8. jquery返回顶部

    // 返回顶部 var fixed_totop = $('.back_top').on('click',function(){ $('html, body').animate({scrollTop: ...

  9. jQuery返回顶部代码

    页面较长时,使用返回顶部按钮比较方便,在电商中必备操作.下面自己制作一个js文件,totop.js,把它直接引用到需要的网页中即可. $(function () { $("body" ...

随机推荐

  1. Fragment与Activity交互(使用Handler)

    1.在Activity中定义一个方法用来设置Handler对象 public void setHandler(Handler handler) {mHandler = handler;} 2.在Fra ...

  2. JavaScript(暂时弃坑...)

    简单数据类型:字符串型.布尔型.数值型 变量名可以包含数字.字母.下划线.$,但不能以数字开头,大小写敏感,不能是JavaScript关键字.避开保留字 //JavaScript保留字 break e ...

  3. hdu 2824 The Euler function(欧拉函数)

    题目链接:hdu 2824 The Euler function 题意: 让你求一段区间的欧拉函数值. 题解: 直接上板子. 推导过程: 定义:对于正整数n,φ(n)是小于或等于n的正整数中,与n互质 ...

  4. js导航栏样式变换

    <script type="text/javascript"> $(function(){ var lis = $(".submenu").chil ...

  5. CoreJavaE10V1P3.6 第3章 Java的基本编程结构－3.6 字符串 String

    String类(java.lang.String)就是Unicode字符序列,例如:"Java\u2122" 3.6.1 Substring 提取子串 String greetin ...

  6. Tiny6410之MMU开启

    存储管理单元存储管理单元MMU概述 在ARM系统中,存储管理单元MMU主要完成以下工作:1.虚拟存储空间到物理存储空间的映射.在ARM中采用页式虚拟存储管理.他把虚拟地址空间分成一个个固定大小的块,每 ...

  7. 2016 ACM/ICPC Asia Regional Qingdao Online

    吐槽: 群O的不是很舒服 不知道自己应该干嘛 怎样才能在团队中充分发挥自己价值 一点都不想写题 理想中的情况是想题丢给别人写 但明显滞后 一道题拖沓很久 中途出岔子又返回来搞 最放心的是微软微软妹可以 ...

  8. Python学习笔记——进阶篇【第九周】———协程

    协程 协程,又称微线程,纤程.英文名Coroutine.一句话说明什么是协程:协程是一种用户态的轻量级线程. 协程拥有自己的寄存器上下文和栈.协程调度切换时,将寄存器上下文和栈保存到其他地方,在切回来 ...

  9. UIPickerView 创建中国地区显示 省份 市

    第一步初始化 UIPickerView *pickerview; //城市滚动表 NSDictionary *dict; //用于存储省份-城市的数据 NSArray *provinceArray; ...

  10. LINUX利用Speedtest测速

    那么远程服务器呢?要知道大多数远程服务器是没有浏览器可以打开web页面的.用浏览器打开网页测速的瓶颈就在此,你不能按计划的对服务器进行定期的常规测试.这时需要到一个名为Speedtest-cli的软件 ...