css
<style>
#top {
width: 50px;
height: 30px;
line-height: 30px;
border-radius: 5px;
background: skyblue;
color: white;
position: fixed;
bottom: 100px;
right: 30px;
padding: 0 20px;
cursor: pointer;
display: none;
}
</style>
body
<body>
1<br>
1<br>
<!-- n個(gè) 1<br> 節(jié)約控件 刪除了-->
<div onclick="topUp()" id="top">
回頂部
</div>
<script>
(function () {
var $ = function (id) {
return document.getElementById(id);
}
window.$ = $;
})()
var t;
window.onscroll = function () {
var topUp = document.body.scrollTop || document.documentElement.scrollTop;
if (topUp > 200) {
// document.getElementById("top").style.display = "block";
$("top").style.display = "block";
} else {
$("top").style.display = "none";
}
}
function topUp() {
t = setInterval(function () {
var st = document.body.scrollTop || document.documentElement.scrollTop;
var speed = Math.floor(-st / 5);
document.body.scrollTop = document.documentElement.scrollTop = st + speed;
if (st === 0) {
clearInterval(t);
}
}, 100)
// document.body.scrollTop = 0;
// document.documentElement.scrollTop = 0;
}
</script>
</body>
image.png
