zoukankan      html  css  js  c++  java
  • Jquery根据滚动条显示返回按钮

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="JQ.js"></script>
        <style>
            .c2
            {
                 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','100px',backgroundColor:'red'});
            $obj.offset({left:100,top:100})
        });
        $('.c2').click(function () {
            $(window).scrollTop(0);
    
        })
    </script>
    </body>
    </html>
    
  • 相关阅读:
    [原]Unity3D深入浅出
    [原]Unity3D深入浅出
    [原]Unity3D深入浅出
    [原]Unity3D深入浅出
    [原]Unity3D深入浅出
    [原]Unity3D深入浅出
    [原]Unity3D深入浅出
    SSH 远程端口转发
    SSH 本地端口转发
    SSH执行远程命令和传送数据
  • 原文地址:https://www.cnblogs.com/Kingfan1993/p/9812033.html
Copyright © 2011-2022 走看看