body {
width: 100vw;
height: 2000px;
background-color: plum;
position: relative;
}
.foot {
width: 100px;
height: 100px;
background-color: powderblue;
position: fixed;
right: 0;
bottom: 0px;
color: rgb(7, 130, 238);
font-size: 40px;
text-align: center;
display: none;
}
</style>
</head>
<body>
<div class="foot">返回顶部</div>
<script>
var div = document.querySelector("div");
window.onscroll = function () {
var top = document.documentElement.scrollTop || document.body.scrollTop;
console.log(top)
var top1 = document.documentElement.clientHeight || document.body.clientHeight;
console.log(top1)
if (top > top1) {
div.style.display = "block"
console.log(div)
} else {
div.style.display = "none"
}
}
div.onclick = function () {
id = setInterval(function () {
var top = document.documentElement.scrollTop || document.body.scrollTop;
var juli = Math.floor(-top / 7);
document.documentElement.scrollTop = top + juli;
if (top = 0) {
clearInterval(id);
}
}, 30)
}
</script>
</body>