<!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. Oracle全角和半角处理函数

    1.TO_MULTI_BYTE语法: TO_MULTI_BYTE(String) 功能: 计算所有单字节字符都替换为等价的多字节字符的String.该函数只有当数据库字符集同时包含多字节和单字节的字符 ...

  2. Hadoop入门实例——WordCount统计单词

    首先要说明的是运行Hadoop需要jdk1.6或以上版本,如果你还没有搭建好Hadoop集群,请参考我的另一篇文章: Linux环境搭建Hadoop伪分布模式 马上进入正题. 1.启动Hadoop集群 ...

  3. mysqldump 备份直接至压缩文件，提高备份及压缩时间

    1.备份及压缩分开 备份mysqldump --single-transaction -hlocalhost --all-databases --triggers --routines --event ...

  4. OSI模型第四层传输层--UDP协议

    1.udp协议 UDP是OSI参考模型中一种无连接的传输层协议,它主要用于不要求分组顺序到达的传输中,分组传输顺序的检查与排序由应用层完成[2]  ,提供面向事务的简单不可靠信息传送服务.UDP 协议 ...

  5. scp命令报错（IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY!）

    使用scp命令移动某一服务器的文件到另外的服务器时报出一下错误: [root@bogon vm_sys1]# scp project.tar.gz root@172.31.0.90:/webdata/ ...

  6. django 学习笔记（一）搭建基础环境

    1.安装django 下载地址 https://github.com/django/django 解压后进入文件夹运行指令 >> python setup.py install 2.创建工 ...

  7. Front-End（一）

    前端初识 现在网站开发的市场越来越大,个人和企业都有了主页.网络办公的需求,并且随着网站开发前端和后台的工作细分,前端开发的需求也越来越大. 前端的任务是将美工的网页设计使用前端技术尽可能无差别地实现 ...

  8. iOS-延迟操作方法总结

    在实际应用中,有时候我们会需要延时执行某些操作,所以我们这里总结了四种延迟操作的方法,并简要分析了每种方法的异同. NSObject的相关方法 第一种方法是使用NSObject类的performSel ...

  9. shell实现四则运算简单方法

    在刚刚学习写shell 批处理时候,进行逻辑运算中,少不了需要进行基础的:四则运算,这里说说在linux shell 里面简单的实现方法.1.简单方法$ b=$((5*5+5-3/2)) $ echo ...

  10. linux显示行数命令

    linux 如何显示一个文件的某几行(中间几行) [一]从第3000行开始,显示1000行.即显示3000~3999行 cat filename | tail -n +3000 | head -n 1 ...