<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding: 0;
}
.div1,.div2{
width: 100%;
height: 800px; }
.div1{
/*border: 5px solid red;*/
/*padding: 20px;*/
/*margin: 2px;*/
background-color:antiquewhite;
}
.div2{
background-color:rebeccapurple;
}
.returntop{
position: fixed;
right: 20px;
bottom: 20px;
width: 80px;
height: 50px;
background-color:yellow;
text-align: center;
line-height: 50px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="returntop hide" onclick="returntop()">返回顶部</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
// 相对于视图窗口
// console.log($('.div1').offset().top);
// console.log($('.div1').offset().left);
//
// console.log($('.div2').offset().top);
// console.log($('.div2').offset().left) // console.log($('.div1').position().top);
// console.log($('.div1').position().left); // console.log($('.div2').position().top);
// console.log($('.div2').position().left)
window.onscroll=function () {
// console.log($(window).scrollTop())
if($(window).scrollTop()>50){
$('.returntop').removeClass('hide')
}
else {
$('.returntop').addClass('hide')
}
}
function returntop() {
$(window).scrollTop(0);
}
</script>
</body>
</html>