点击缓慢回到顶部

最新推荐文章于 2023-08-10 21:54:06 发布

前端小白...

最新推荐文章于 2023-08-10 21:54:06 发布

阅读量348

点赞数 1

本文链接：https://blog.youkuaiyun.com/m0_53553562/article/details/112251324

版权

话不多说上代码

//css
<style>
    *{margin: 0;padding: 0;}
    .list{
        margin-bottom: 20px;
        height: 3000px;
        background: slateblue
    }
    .btn{
        float: right;
        background: seagreen;
        padding: 20px;
    }
    .con{
        height:3000px;
        background: skyblue;
    }
</style>

//html
<ul class="list">
   <div class="con"></div>
</ul>
<button class="btn">回到顶部</button>
//在线引入jq
<script src="https://code.jquery.com/jquery-3.1.1.min.js</script>

//js
$(function(){
    $(window).scroll(function(){
        if($(this).scrollTop()>1500){
            $(".con").fadeIn();
        }else{
            $(".con").fadeOut();
        }
    });
    $(".btn").click(function(){
        if ($(window).scrollTop() > 0) {
        	$("html,body").animate({ scrollTop: 0 }, 600);
        }
    })
})