<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="JQ.js"></script>

    <style>

        .c2

        {

            width: 100px;

            height: 100px;

            background-color: green;

            position: fixed;

            line-height: 100px;

            bottom: 15px;

            right: 15px;

            display: none;

        }

    </style>

</head>

<body>

<input id="i1" type="button" value="点我">

<div class="c2">返回顶部</div>

<div class="c1"></div>

<div class="c3">1</div>

<div class="c3">2</div>

<div class="c3">3</div>

<div class="c3">4</div>

<div class="c3">5</div>

<div class="c3">6</div>

<div class="c3">7</div>

<div class="c3">8</div>

<div class="c3">9</div>

<div class="c3">10</div>

<div class="c3">11</div>

<div class="c3">12</div>

<div class="c3">13</div>

<div class="c3">14</div>

<div class="c3">15</div>

<div class="c3">16</div>

<div class="c3">17</div>

<div class="c3">18</div>

<div class="c3">19</div>

<div class="c3">20</div>

<div class="c3">21</div>

<div class="c3">22</div>

<div class="c3">23</div>

<div class="c3">24</div>

<div class="c3">25</div>

<div class="c3">26</div>

<div class="c3">27</div>

<div class="c3">28</div>

<div class="c3">29</div>

<div class="c3">30</div>

<div class="c3">31</div>

<div class="c3">32</div>

<div class="c3">33</div>

<div class="c3">34</div>

<div class="c3">35</div>

<div class="c3">36</div>

<div class="c3">37</div>

<div class="c3">38</div>

<div class="c3">39</div>

<div class="c3">40</div>

<div class="c3">41</div>

<div class="c3">42</div>

<div class="c3">43</div>

<div class="c3">44</div>

<div class="c3">45</div>

<div class="c3">46</div>

<div class="c3">47</div>

<div class="c3">48</div>

<div class="c3">49</div>

<div class="c3">50</div>

<div class="c3">51</div>

<div class="c3">52</div>

<div class="c3">53</div>

<div class="c3">54</div>

<div class="c3">55</div>

<div class="c3">56</div>

<div class="c3">57</div>

<div class="c3">58</div>

<div class="c3">59</div>

<div class="c3">60</div>

<div class="c3">61</div>

<div class="c3">62</div>

<div class="c3">63</div>

<div class="c3">64</div>

<div class="c3">65</div>

<div class="c3">66</div>

<div class="c3">67</div>

<div class="c3">68</div>

<div class="c3">69</div>

<div class="c3">70</div>

<div class="c3">71</div>

<div class="c3">72</div>

<div class="c3">73</div>

<div class="c3">74</div>

<div class="c3">75</div>

<div class="c3">76</div>

<div class="c3">77</div>

<div class="c3">78</div>

<div class="c3">79</div>

<div class="c3">80</div>

<div class="c3">81</div>

<div class="c3">82</div>

<div class="c3">83</div>

<div class="c3">84</div>

<div class="c3">85</div>

<div class="c3">86</div>

<div class="c3">87</div>

<div class="c3">88</div>

<div class="c3">89</div>

<div class="c3">90</div>

<div class="c3">91</div>

<div class="c3">92</div>

<div class="c3">93</div>

<div class="c3">94</div>

<div class="c3">95</div>

<div class="c3">96</div>

<div class="c3">97</div>

<div class="c3">98</div>

<div class="c3">99</div>

<div class="c3">100</div>

<script>

    $(window).scroll(function () {

        if ($(this).scrollTop()>100)

        {

            $('.c2').css('display','block')

        }

        else {

            $('.c2').css('display','none')

        }

    });

    $('#i1').click(function () {

        let $obj=$('.c1');

        $obj.css({height:'100px',width:'100px',backgroundColor:'red'});

        $obj.offset({left:100,top:100})

    });

    $('.c2').click(function () {

        $(window).scrollTop(0);

    })

</script>

</body>

</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. kafka模型理解

    1.消息发送至一个topic,而这个topic可以由多个partition组成,每条消息在partition中的位置称为offset 2.消息存在有效期,如果设置为2天,则消息2天后会被删除 3.每个 ...

  2. UI 前端参考

    :http://amazeui.org/ :http://www.dcloud.io/index.html :https://weui.io/ :http://m.sui.taobao.org/get ...

  3. SparkSQL – 从0到1认识Catalyst（转载）

    最近想来,大数据相关技术与传统型数据库技术很多都是相互融合.互相借鉴的.传统型数据库强势在于其久经考验的SQL优化器经验,弱势在于分布式领域的高可用性.容错性.扩展性等,假以时日,让其经过一定的改造, ...

  4. Java函数式编程和lambda表达式

    为什么要使用函数式编程 函数式编程更多时候是一种编程的思维方式,是种方法论.函数式与命令式编程的区别主要在于:函数式编程是告诉代码你要做什么,而命令式编程则是告诉代码要怎么做.说白了,函数式编程是基于 ...

  5. Python股票分析系列——基础股票数据操作（一）.p3

    该系列视频已经搬运至bilibili: 点击查看 欢迎来到Python for Finance教程系列的第3部分.在本教程中,我们将使用我们的股票数据进一步分解一些基本的数据操作和可视化.我们将要使用 ...

  6. Jmeter(三十七)循环控制器+交替控制器+事务控制器 完美实现接口字段参数化校验

    我们在做接口自动化的时候,常常因为无法灵活的的校验接口字段而烦恼.不能自动校验接口字段的脚本,也就不能称之为接口自动化.因此,我设计了一套组合式的控制器,可以完美的解决这个问题 1:首先我们需要在本地 ...

  7. Python全栈开发之路 【第四篇】：Python基础之函数

    本节内容 函数def: 1.位置参数,默认参数 2.位置参数,关键参数 3.如果参数中出现 *users,传递的参数就可以不再是固定的个数, 传过来的所有元素进行打包成元组 *args,**kwarg ...

  8. VS2012添加数据库连接时报错，未能加载文件或程序集microsoft.sqlserver.management.sdk.sfc

    今天在VS2012中添加数据库连接时报错 未能加载文件或程序集microsoft.sqlserver.management.sdk.sfc,Version=11.0 查了很多资料,最后下载安装了Sha ...

  9. 未能加载文件或程序集&quot;Newtonsoft.Json, Version=4.5.0.0

    这问题遇到好几次了,重新更改了引用都不好使,有的时候版本改成一致就好了,但是有的地方你不知道在哪里用了就不好排查,所性在config里面加个配置让程序运行的时候去处理得了~ 很实用,放在configu ...

  10. 异常：fatal: unable to access 'https://git.oschina.net/pcmpcs/library.git/': Could not resolve host

    git  fork项目时出现的异常. 原因: 我以前用的是ssh地址做的远程通信地址,而这次是用的是https,因为很久没用,所以忘记了以前是用ssh的了.解决方案一:复制ssh协议的地址,然后再关联 ...