jquery回到顶部功能

拿着98k的少年

于 2021-01-03 18:58:20 发布

阅读量79

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_48519309/article/details/112146732

版权

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="../js/1.11.3/jquery-1.11.3.js"></script>
<style>
   body{
       height: 3000px;
       background: linear-gradient(to right,#2ecc71,#3498db,#9b5b6e);
   }
   .back-top{
       position: fixed;;
       right: 40px;
       bottom: 40px;
       width: 26px;
       height: 62px;
       background: url("rocket.png") no-repeat;
       /*transition: all .5s;*/

   }
    .back-top:hover{
        background-position: 0 -62px;
    }
</style>
<body>

<div class="back-top">
</div>

</body>
<script>
    $(function () {
        $(".back-top").fadeOut();
        $(window).scroll(function(){
        if($(window).scrollTop()>200){
            $(".back-top").slideDown(1000)
        }else{
            $(".back-top").fadeOut()
        }
    })

        $('.back-top').click(function () {
                $('html').animate({scrollTop:0},500);
        })
    })

</script>
</html>

拿着98k的少年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery回到顶部功能

代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><script src="../js/1.11.3/jquery-1.11.3.js"></script><style> body{ height: 3000
复制链接

扫一扫