jQuery实现小火箭返回顶部

最新推荐文章于 2021-05-11 20:08:16 发布

温柔女魔头

最新推荐文章于 2021-05-11 20:08:16 发布

阅读量292

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_19880197/article/details/86697714

版权

jQuery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

THML

<body>
<div class="actGotop">
    <a href="#" title="Top"></a>
</div>
</body>

CSS

body{
    height: 8000px;
    width: 100%;
}
a{
    color: #fff;
}
.actGotop{
    position: fixed;
    bottom:50px;
    right:50px;
    width: 150px;
    height: 243px;
    display: none;
    z-index: 100;
}
.actGotop a,.actGotop a:link{
    width: 150px;
    height: 243px;
    display: inline-block;
    background: url("images/act.jpg");
    outline: none;
}

jQuery

<script src="jQuery/jquery-1.12.3.js"></script>
        <script>
            $(function () {
//                当页面超出1000px 让小火箭显示，小于1000px让小火箭隐藏
                $(window).scroll(function () {
                   if($(window). scrollTop()>=1000){
                       $(".actGotop").fadeIn();
                   }else {
                       $(".actGotop").fadeOut();
                   }
                });
//                在外边注册
                $(".actGotop").click(function () {
                   $("html,body").animate({scrollTop:0});
                });
            });
         </script>

温柔女魔头

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现小火箭返回顶部

THML&lt;body&gt;&lt;div class="actGotop"&gt; &lt;a href="#" title="Top"&gt;&lt;/a&gt;&lt;/div&gt;&lt;/body&gt;CSSbody{ height: 8000px; width: 100%;}a{
复制链接

扫一扫

专栏目录