jq 小火箭返回顶部案例

最新推荐文章于 2020-08-10 08:20:07 发布

weixin_34194702

最新推荐文章于 2020-08-10 08:20:07 发布

阅读量108

点赞数 1

原文链接：http://www.cnblogs.com/lujieting/p/10110780.html

版权

 <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>

转载于:https://www.cnblogs.com/lujieting/p/10110780.html

weixin_34194702

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jq 小火箭返回顶部案例

<style> body { height: 8000px; } a { color: #FFF; } .actGotop { position: fixed; bottom: 50px; right: 5...
复制链接

扫一扫