<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         *{

             margin:0;

             padding: 0;

         }

         .div1,.div2{

             width: 100%;

             height: 800px;

         }

         .div1{

             /*border: 5px solid red;*/

             /*padding: 20px;*/

             /*margin: 2px;*/

            background-color:antiquewhite;

         }

         .div2{

             background-color:rebeccapurple;

         }

         .returntop{

             position: fixed;

             right: 20px;

             bottom: 20px;

             width: 80px;

             height: 50px;

             background-color:yellow;

             text-align: center;

             line-height: 50px;

         }

         .hide{

             display: none;

         }

     </style>

 </head>

 <body>

 <div class="div1"></div>

 <div class="div2"></div>

 <div class="returntop hide" onclick="returntop()">返回顶部</div>

 <script src="jquery-3.3.1.min.js"></script>

 <script>

     // 相对于视图窗口

     // console.log($('.div1').offset().top);

     // console.log($('.div1').offset().left);

     //

     // console.log($('.div2').offset().top);

     // console.log($('.div2').offset().left)

      // console.log($('.div1').position().top);

     // console.log($('.div1').position().left);

     // console.log($('.div2').position().top);

     // console.log($('.div2').position().left)

     window.onscroll=function () {

         // console.log($(window).scrollTop())

         if($(window).scrollTop()>50){

             $('.returntop').removeClass('hide')

         }

         else {

             $('.returntop').addClass('hide')

         }

     }

     function returntop() {

         $(window).scrollTop(0);

     }

 </script>

 </body>

 </html>

jQuery之scroll用法实例的更多相关文章

  1. jQuery ajax - getJSON() 用法实例

    实例 从 test.js 载入 JSON 数据并显示 JSON 数据中一个 name 字段数据: $.getJSON("test.js", function(json){ aler ...

  2. jQuery.holdReady()方法用法实例

    调用此方法可以延迟jQuery的ready事件,也就是说尽管文档已经加载完成,也不会执行ready事件处理方法.可以多次调用jQuery.holdReady()方法,以延迟jQuery的ready事件 ...

  3. jquery的on()用法实例

    首先,先看官方描述: 再来,用实例解释一下: 1.简单绑定单个事件: $("body").on("click",".edit_btn",fu ...

  4. 【学亮IT手记】jQuery each()函数用法实例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

  5. jQuery中on()方法用法实例详解

    这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能及各种常见的使用技巧,并对比分析了与bind(),live(),delegate()等方法的区别,需要的朋友可以参考下 本 ...

  6. jQuery中on()方法用法实例

    这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能.定义及在匹配元素上绑定一个或者多个事件处理函数的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中on()方法 ...

  7. jquery下json数组的操作用法实例

    jquery下json数组的操作用法实例: jquery中操作JSON数组的情况中遍历方法用的比较多,但用添加移除这些好像就不是太多了. 试过json[i].remove(),json.remove( ...

  8. jQuery包裹节点用法完整示例

    本文实例讲述了jQuery包裹节点用法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Typ ...

  9. Jquery remove 高级用法

    Jquery remove 高级用法 html 代码 <div class="file-image">abc1111</div><div class= ...

随机推荐

  1. vue-cli构建项目 npm run build后应该怎么运行在本地查看效果

    问题: 就是 bulid 打包后,想本地看看效果,本地看不了.... 网上看到一个....   具体更多在: http://www.dabaipm.cn/static/frontend/346.htm ...

  2. LDAP 原理图解

    来自为知笔记(Wiz)

  3. MySQL 备份恢复（导入导出）单个 innodb表

    MySQL 备份恢复单个innodb表呢,对于这种恢复我们我们很多朋友都不怎么了解了,下面一起来看一篇关于MySQL 备份恢复单个innodb表的教程 在实际环境中,时不时需要备份恢复单个或多个表(注 ...

  4. elasticsearch集群搭建报错： not enough master nodes discovered during pinging

    自己用一台 阿里云 服务器 搭建ES集群的时候,总是报上面的问题. 而且两个ES服务都是报同样的问题.自己的配置文件如下: es服务1配置文件 cluster.name: elasticsearch ...

  5. SQL点点滴滴_SQL分页查询

    假如tb_customer表中的数据量非常大,在显示时要分页显示而且每页只显示10条信息.为了效果我们取第三页的数据. 方法一:遍历两次表,取不同的数据. select top 10 * from t ...

  6. DDD（领域驱动设计）总结

    基本概念: 领域驱动设计(简称 ddd)概念来源于2004年著名建模专家eric evans发表的他最具影响力的书籍:<domain-driven design –tackling comple ...

  7. 网站url常见报错

    报错情况比较复杂,此处列出比较常见的几种报错内容: 报错: 报错是一个大类, 的报错基本上是权限问题,出现 报错时您需要检测权限配置问题. 403.1 错误是由于“执行”访问被禁止而造成的.若试图从目 ...

  8. setfacl 命令的常用用法

    setfacl命令----可以用来细分linux下的文件权限. chmod命令----可以把文件权限分为u,g,o三个组,而setfacl可以对每一个文件或目录设置更精确的文件权限. 换句话说,set ...

  9. 51nod 1102 面积最大的矩形

    题目地址在这儿 求取:以某矩形g[i]为最小值的区间的左右端点,得到一个临时解.所有临时解中的最大值即为解. 求取区间的方法可以用单调栈,也可以用下面这种十分简洁的类似于递归的方法.下面这种解法求出来 ...

  10. python 使用set对列表去重后，保持原来列表的顺序排列

    testlist = ['cc', 'bbbb', 'afa', 'sss', 'bbbb', 'cc', 'shafa'] set2list = list(set(testlist)) print ...