点击按钮回到顶部的写法(jquery)
<style>
.box{
width:100px;
height:3000px;
background:red;
}
.btn{
background:blue;
color:black;
position:fixed;
right:20px;
bottom:20px;
display:none;
}
</style>
<body>
<div class="box">
111
</div>
<a href="javascript:void(0)" class="btn">点击回到顶部</a>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
// jquery实现
window.addEventListener("scroll",function(){
let scrollTop=document.body.scrollTop || document.documentElement.scrollTop;
if(scrollTop>1000){
$(".btn").css("display","block");
}else{
$(".btn").css("display","none");
}
})
$(".btn").click(function(){
$("html,body").animate({scrollTop:"0px"},500);
})
</script>