jq 小火箭返回顶部案例 

 <style>
        body {
            height: 8000px;
        }

        a {
            color: #FFF;
        }

        .actGotop {
            position: fixed;
            bottom: 50px;
            right: 50px;
            width: 150px;
            height: 195px;
            display: none;
            z-index: 100;
        }

        .actGotop a, .actGotop a:link {
            width: 150px;
            height: 195px;
            display: inline-block;
            background: url(imgs/gotop.png) no-repeat;
            outline: none;
        }

        .actGotop a:hover {
            width: 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>
posted @ 2018-12-12 20:23  lujieting0  阅读(481)  评论(0)  编辑  收藏  举报