<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.div1,.div2{
width: 100%;
height: 800px;
}
.div1{
background-color: aqua;
}
.div2{
background-color: lavenderblush;
}
.areturn{
position: fixed;/*固定就要设置 右边和底部距离*/
right: 20px;/*距离右边*/
bottom: 20px;/*距离底部*/
width: 50px;
height: 50px;
background-color: lavender;
color: white;
text-align: center;/*蚊子居中*/
line-height: 50px;
}
.hide{
display:none;//隐藏
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="areturn hide" onclick="returnTop()">返回</div>
<script src="jquery-3.3.1.min.js"></script><!--不加此句$不识别-->
<script>
window.onscroll=function () {
//console.log($(window).scrollTop())//滚轮距离顶部的距离,就是网页右边那个滑块
if($(window).scrollTop()>300){
$(".areturn").removeClass("hide")//实现功能就是回到顶部时，右边滚轮隐藏
}else{
$(".areturn").addClass("hide")
}
}
function returnTop(){
$(window).scrollTop(0)//强制设置距离为0回到顶部
}
</script>
</body>
</html>
