<!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. PHP在foreach中对$value赋值无效，应该用 ‘键’ 或者 &$value的形式

    首先我们看下这段代码: foreach ($data as$value) { $value['name'] = 'Hehe'; } $data中原始的数据为: array(1) { [0] => ...

  2. 改bug后 fix bug 时，一个不错的修复描述模板

    *问题原因:* 问题出现的原因.*解决方法:* 问题的解决方案.*影响分支:* 影响哪些分支. *相关修改:* 具体的修改文件列表.*自测结果:* 自行测试了哪些用例,将大概步骤描述出来. *影响功能 ...

  3. Linux运维体系

  4. 从golang-gin-realworld-example-app项目学写httpapi (四)

    https://github.com/gothinkster/golang-gin-realworld-example-app/blob/master/users/routers.go 路由定义 pa ...

  5. JavaScript的本地对象、内置对象、宿主对象

    首先解释下宿主环境:一般宿主环境由外壳程序创建与维护,只要能提供js引擎执行的环境都可称之为外壳程序.如:web浏览器,一些桌面应用系统等.即由web浏览器或是这些桌面应用系统早就的环境即宿主环境. ...

  6. 消除 Xcode7 中 directory not found for option 'xxxx' 警告

    消除 Xcode7 中 directory not found for option 'xxxx' 警告 升级Xcode7之后,你会遇到一些警告信息,诸如以下一条: ld: warning: dire ...

  7. VS编译报错Error2019

    1.对项目右键,属性,链接器,常规,附加库目录,查看lib的路径是否填全了,写对了. 2.是否对项目添加引用.

  8. 云端办公是 Office系统的未来方向么 ？

    云端办公是 Office系统的未来方向么 ? 话说随着互联网,HTML技术,云计算等技术的发展,越来越多的应用已经迁移到云端, 以我们熟悉的电脑游戏为例,从单机游戏,到网络游戏,再到网页游戏,基本就是 ...

  9. ZT android -- 蓝牙 bluetooth （五）接电话与听音乐

    android -- 蓝牙 bluetooth (五)接电话与听音乐 分类: Android的原生应用分析 2013-07-13 20:53 2165人阅读 评论(9) 收藏 举报 蓝牙android ...

  10. There was a problem confirming the ssl certificate: [SSL: TLSV1_ALERT_PROTOCOL_VERSION] tlsv1 alert protocol version (_ssl.c:661) - skipping

    Could not fetch URL https://pypi.python.org/simple/xlrd/: There was a problem confirming the ssl cer ...