zoukankan      html  css  js  c++  java
  • 小火箭返回顶部案例

    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>
    

      

  • 相关阅读:
    AngularJS自定义表单验证器
    AngularJS自定义表单验证
    DataTables自定义筛选器
    DataTables列过滤器
    DataTables语言国际化
    DataTables DOM定位
    DataTables自定义事件
    DataTables给表格绑定事件
    自定义Celery任务记录器
    celery 日志设置
  • 原文地址:https://www.cnblogs.com/luwn/p/12787468.html
Copyright © 2011-2022 走看看