• 小火箭返回顶部案例


    html文件:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>小火箭返回顶部案例</title>
      <style>
        body {
          height: 8000px;
        }
        
        a {
          color: #FFF;
        }
        
        .actGotop {
          position: fixed;
          bottom: 50px;
          right: 50px;
           150px;
          height: 195px;
          display: none;
          z-index: 100;
        }
        
        .actGotop a, .actGotop a:link {
           150px;
          height: 195px;
          display: inline-block;
          background: url(images/gotop.png) no-repeat;
          outline: none;
        }
        
        .actGotop a:hover {
           150px;
          height: 195px;
          background: url(images/gotop.gif) no-repeat;
          outline: none;
        }
      </style>
    </head>
    <body>
    <!-- 返回顶部小火箭 -->
    <div class="actGotop"><a href="javascript:;" title="Top"></a></div>
    <script src="jquery-1.12.4.js"></script>
    <script>
          $(function () {
            //当页面超出去1000px的时候,让小火箭显示出来,如果小于1000,就让小火箭隐藏
            $(window).scroll(function(){
              if($(window).scrollTop() >= 1000){
                $(".actGotop").stop().fadeIn();
              }else{
                $(".actGotop").stop().fadeOut();
              }
            })
            //在外面注册
            $(".actGotop").stop().click(function(){
              $("html,body").stop().animate({scrollTop:0},1000);
            })
          })
    </script>
    </body>
    </html>
    

      

  • 相关阅读:
    MySQL之增_insert-replace
    Linux如何配置bond
    行转列及列转行查询
    SELECT中常用的子查询操作
    SELECT中的多表连接
    MySQL最常用分组聚合函数
    SELECT中的if_case流程函数
    MySQL常用日期时间函数
    MySQL常用数值函数
    dnslog注入
  • 原文地址:https://www.cnblogs.com/luwn/p/12787468.html
Copyright © 2020-2023  润新知