<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>回到顶部</title>
<link rel="stylesheet" href="css.css">
<script src="js.js"></script>
</head>
<body style="height: 2000px;">
<input id="btn" type="button" value="回到顶部">
</body>
</html>
css.css
input {
position: fixed;
bottom: 0;
right: 10px;
100px;
height: 50px;
background: rgba(220, 153, 255, 0.94);
border: 0;
outline: none;
color: #C700FF;
font-size: 18px;
border-radius: 10px;
cursor: pointer;
}
js.js
window.onload = function() {
var oBtn = document.getElementById('btn');
var timer = null; //存放一个定时器
var bSys = true; //判断是不是系统在滚动页面
//页面滚动时触发事件
window.onscroll = function() {
//如果不是系统在滚动页面就是用户在拖动页面
if (!bSys) {
//清除定时器
clearInterval(timer);
}
bSys = false;
};
oBtn.onclick = function() { //点击按钮时开启定时器
timer = setInterval(function() {
//获取滚动条距浏览器顶部距离
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//滚动条每30毫秒滚动的距离
var iSpeed = Math.ceil(scrollTop / 5);
document.documentElement.scrollTop = document.body.scrollTop = scrollTop - iSpeed;
if (scrollTop == 0) { //如果滚动条距浏览器顶部为零，清空定时器
clearInterval(timer);
}
bSys = true;
}, 30)
}
}