经常在浏览一些网站的时候会返现，滚动浏览器的滚动条的时候，当你滚动到一定的范围，在窗口的右下角有一个按钮，点击就会返回顶部，而且会有一个过渡的效果，当向上滚动到一定的范围的时候，按钮就会消失。
实现这种效果非常的简单。
- 初始有一个
button,固定定位到右下角，初始状态是隐藏的，添加一个点击事件。 - 监听
window的滚动事件，滚动到一定的范围设置button的显示隐藏。 - 动画效果使用计时器，每隔一段时间调用一次，把值赋给
window.scrollTop()。
demo地址（https://xukeler.github.io/toTop/）
- html代码
<button id="btn" onclick="toTOp()">返回顶部</button>
- css代码
body {
height: 3000px;
}
* {
padding: 0;
margin: 0;
}
#btn {
position: fixed;
bottom: 50px;
right: 50px;
display: none;
}
- js代码
let btn = document.getElementById("btn");
window.onscroll = function () {
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//兼容IE
if (scrollTop > 1080) {
btn.style.display = "block"
} else {
btn.style.display = "none"
}
}
function toTOp() {
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
let timer = setInterval(() => {
scrollTop -= 100;
window.scrollTo(0, scrollTop)
if (scrollTop <= 0) {
clearInterval(timer)
}
}, 16.7)
}
