1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="JQ.js"></script>
  7.     <style>
  8.         .c2
  9.         {
  10.             width: 100px;
  11.             height: 100px;
  12.             background-color: green;
  13.             position: fixed;
  14.             line-height: 100px;
  15.             bottom: 15px;
  16.             right: 15px;
  17.             display: none;
  18.         }
  20.     </style>
  22. </head>
  23. <body>
  24. <input id="i1" type="button" value="点我">
  25. <div class="c2">返回顶部</div>
  26. <div class="c1"></div>
  27. <div class="c3">1</div>
  28. <div class="c3">2</div>
  29. <div class="c3">3</div>
  30. <div class="c3">4</div>
  31. <div class="c3">5</div>
  32. <div class="c3">6</div>
  33. <div class="c3">7</div>
  34. <div class="c3">8</div>
  35. <div class="c3">9</div>
  36. <div class="c3">10</div>
  37. <div class="c3">11</div>
  38. <div class="c3">12</div>
  39. <div class="c3">13</div>
  40. <div class="c3">14</div>
  41. <div class="c3">15</div>
  42. <div class="c3">16</div>
  43. <div class="c3">17</div>
  44. <div class="c3">18</div>
  45. <div class="c3">19</div>
  46. <div class="c3">20</div>
  47. <div class="c3">21</div>
  48. <div class="c3">22</div>
  49. <div class="c3">23</div>
  50. <div class="c3">24</div>
  51. <div class="c3">25</div>
  52. <div class="c3">26</div>
  53. <div class="c3">27</div>
  54. <div class="c3">28</div>
  55. <div class="c3">29</div>
  56. <div class="c3">30</div>
  57. <div class="c3">31</div>
  58. <div class="c3">32</div>
  59. <div class="c3">33</div>
  60. <div class="c3">34</div>
  61. <div class="c3">35</div>
  62. <div class="c3">36</div>
  63. <div class="c3">37</div>
  64. <div class="c3">38</div>
  65. <div class="c3">39</div>
  66. <div class="c3">40</div>
  67. <div class="c3">41</div>
  68. <div class="c3">42</div>
  69. <div class="c3">43</div>
  70. <div class="c3">44</div>
  71. <div class="c3">45</div>
  72. <div class="c3">46</div>
  73. <div class="c3">47</div>
  74. <div class="c3">48</div>
  75. <div class="c3">49</div>
  76. <div class="c3">50</div>
  77. <div class="c3">51</div>
  78. <div class="c3">52</div>
  79. <div class="c3">53</div>
  80. <div class="c3">54</div>
  81. <div class="c3">55</div>
  82. <div class="c3">56</div>
  83. <div class="c3">57</div>
  84. <div class="c3">58</div>
  85. <div class="c3">59</div>
  86. <div class="c3">60</div>
  87. <div class="c3">61</div>
  88. <div class="c3">62</div>
  89. <div class="c3">63</div>
  90. <div class="c3">64</div>
  91. <div class="c3">65</div>
  92. <div class="c3">66</div>
  93. <div class="c3">67</div>
  94. <div class="c3">68</div>
  95. <div class="c3">69</div>
  96. <div class="c3">70</div>
  97. <div class="c3">71</div>
  98. <div class="c3">72</div>
  99. <div class="c3">73</div>
  100. <div class="c3">74</div>
  101. <div class="c3">75</div>
  102. <div class="c3">76</div>
  103. <div class="c3">77</div>
  104. <div class="c3">78</div>
  105. <div class="c3">79</div>
  106. <div class="c3">80</div>
  107. <div class="c3">81</div>
  108. <div class="c3">82</div>
  109. <div class="c3">83</div>
  110. <div class="c3">84</div>
  111. <div class="c3">85</div>
  112. <div class="c3">86</div>
  113. <div class="c3">87</div>
  114. <div class="c3">88</div>
  115. <div class="c3">89</div>
  116. <div class="c3">90</div>
  117. <div class="c3">91</div>
  118. <div class="c3">92</div>
  119. <div class="c3">93</div>
  120. <div class="c3">94</div>
  121. <div class="c3">95</div>
  122. <div class="c3">96</div>
  123. <div class="c3">97</div>
  124. <div class="c3">98</div>
  125. <div class="c3">99</div>
  126. <div class="c3">100</div>
  128. <script>
  129.     $(window).scroll(function () {
  130.         if ($(this).scrollTop()>100)
  131.         {
  132.             $('.c2').css('display','block')
  133.         }
  134.         else {
  135.             $('.c2').css('display','none')
  136.         }
  137.     });
  138.     $('#i1').click(function () {
  139.         let $obj=$('.c1');
  140.         $obj.css({height:'100px',width:'100px',backgroundColor:'red'});
  141.         $obj.offset({left:100,top:100})
  142.     });
  143.     $('.c2').click(function () {
  144.         $(window).scrollTop(0);
  146.     })
  147. </script>
  148. </body>
  149. </html>

Jquery根据滚动条显示返回按钮的更多相关文章

  1. android toolbar 显示返回按钮并改变按钮颜色

    <android.support.design.widget.AppBarLayout android:id="@+id/about_appbar" android:layo ...

  2. jquery自定义滚动条 鼠标移入或滚轮时显示 鼠标离开或悬停超时时隐藏

    一.需求: 我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器.为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉. 二.他山之石: 案例来自h ...

  3. jquery判断滚动到某个div显示底部按钮

    判读滚动某个div显示底部按钮 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta char ...

  4. IOS让返回按钮显示自定义标题而不是上个ViewController的title

    在开发IOS的时候发现当从一个ViewController跳转到另一个ViewController时,被跳转到的那个ViewController的返回按钮总是显示的是上个ViewController的 ...

  5. jquery 微信端 点击物理返回按钮，弹出提示框

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. jQuery自定义滚动条样式插件mCustomScrollbar

    如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...

  7. jQuery制作go to top按钮

    转自:http://www.w3cplus.com/jquery/scrolling-to-the-top-with-jquery 每每看到网友Blog的页面底部或中间有一个按钮回到页面顶部,羡慕死人 ...

  8. 浏览器返回按钮不会触发onLoad事件

    最近在做一个移动端项目,发现移动端某些返回和PC端是有差异的, 比如ios中返回按钮是直接使用缓存的, 不会执行任何js代码, 这个问题很蛋疼, 例如, 在提交的时候将按钮设置为loading状态, ...

  9. 【jquery】jquery 自定义滚动条

    可以自由的给滚动条定义背景,上下按钮,当然不仅仅是颜色,连图片当背景也可以.支持鼠标滚轮,点击滚动条滚轴定位,上下按钮久按加速,兼容 ie,firefox,chrome. 调用方法: $(" ...

随机推荐

  1. List对象去重碎碎念之神叨叨

    前言 List集合操作去除重复数据的这种情况经常会碰到,博客园里面也有很多大神们做过,在这里主要是借鉴然后自己整理了一下,主要是为了方便自己,以后再次碰到这种去重问题,直接打开自己的链接拿起键盘就是干 ...

  2. Python入门-函数

    定义:将一组语句的集合通过一个名字(函数名)封装起来,要先执行这个函数,只需要调用其函数名即可.特性:1.减少重复代码2.使程序变的可扩展3.使程序变的易维护 函数参数:形参和实参形参:位置参数,关键 ...

  3. C#使用OneNote的图片文字识别功能（OCR）

    http://www.cnblogs.com/Charltsing/p/OneNoteOCR.html 有需要技术咨询的,联系QQ564955427 前段时间有人问我能不能通过OneNote扫描图片, ...

  4. 什么是车辆识别代码(VIN)

    车辆识别代码(VIN),VIN是英文Vehicle Identification Number(车辆识别码)的缩写.因为ASE标准规定:VIN码由17位字符组成,所以俗称十七位码.正确解读VIN码,对 ...

  5. JDK8 的FullGC 之 metaspace

    JDK8 的FullGC 之 metaspace - 简书https://www.jianshu.com/p/1a0b4bf8d498

  6. HTTP之referrer

    我们知道,在页面引入图片.JS 等资源,或者从一个页面跳到另一个页面,都会产生新的 HTTP 请求,浏览器一般都会给这些请求头加上表示来源的 Referrer 字段.Referrer 在分析用户来源时 ...

  7. Notepad++快捷使用

    用Notepad++写代码,要是有一些重复的代码想copy一下有木有简单的方法呢,确实还是有的不过也不算太好用.主要是应用键盘上的 Home 键 和 End 键.鼠标光标停留在一行的某处,按 Home ...

  8. asp.net core认证和授权的初始认识--claim、claimsidentity、claimsprincipal

    Claim表示一个声明单元,它用来组成ClaimsIdentity.ClaimsIdentity表示一个证件,例如身份证,身份证上面的名字表示一个Claim,身份证号也表示一个Claim,所有这些Cl ...

  9. 面象对象设计原则之七：合成复用原则（Composition/Aggregate Reuse Principle, CARP）

    合成复用原则又称为组合/聚合复用原则(Composition/Aggregate Reuse Principle, CARP),其定义如下: 合成复用原则(Composite Reuse Princi ...

  10. [转帖]Docker的数据管理(volume/bind mount/tmpfs)

    Docker(十五)-Docker的数据管理(volume/bind mount/tmpfs) https://www.cnblogs.com/zhuochong/p/10069719.html do ...