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

     <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(imgs/gotop.png) no-repeat;
    outline: none;
    }

    .actGotop a:hover {
    150px;
    height: 195px;
    background: url(imgs/gotop.gif) no-repeat;
    outline: none;
    }
    </style>
    </head>
    <body>
    <!-- 返回顶部小火箭 -->
    <div class="actGotop"><a href="#" 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(1000);
    } else {
    $("actGotop").stop().fadeOut(1000);
    }
    });
    // function getScroll(){
    // return {
    // left:window.pageYOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
    // top:window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    // }
    // }
    //在外面注册
    $("actGotop").click(function () {
    $("html,body").stop().animated({scrollTop: 0}, 3000);
    });
    });
    </script>
  • 相关阅读:
    CString常用方法简介
    @PostConstruct与@PreDestroy
    Servlet知识
    Extjs ——radiogroup子元素宽度调整
    JS的Document属性和方法
    sql server
    C#中的结构,练习
    datagridview实现复制粘贴
    VS.NET2010水晶报表安装部署[VS2010]
    C#中基础知识积累
  • 原文地址:https://www.cnblogs.com/lujieting/p/10110780.html
Copyright © 2011-2022 走看看