返回顶部动画:
效果:点击返回按钮,立刻回到顶部
// js代码
<script>
var img1 = document.getElementById("img1");
//设置返回按钮的显现情况
window.onscroll = function () {
// 浏览器的scrollTop
var top = document.body.scrollTop ||
document.documentElement.scrollTop;
console.log(top);
// 文档的可视高度
if (top >= document.documentElement.clientHeight) {
img1.style.display = "block";
} else {
img1.style.display = "none";
}
}
img1.onclick = function () {
var timer = setInterval(function () {
var step = 100;
//因为返回顶部,所以给整个页面添加事件
document.body.scrollTop -= step;
document.documentElement.scrollTop -= step;
if (document.body.scrollTop || document.documentElement.scrollTop <= 0) {
clearInterval(timer);
}
}, 50)
}
</script>