参考自一博客(https://www.cnblogs.com/abao0/p/6642288.html)内有慕课网教程(后发现有bug, 弃置不用了)
以下有问题, 当滚动条处于顶部时, 刷新页面, 回到顶部icon依然会出现.
//Page loading trigger window.onload = function () { var oscrollBtn = document.getElementById(‘scrollBtn‘); var timer = null; var isTop = true; //Gets the height of the visible window var clientHeight = document.documentElement.clientHeight; //Eliminate the problem of returning the top icon when it is at the top var osTop = document.documentElement.scrollTop || document.body.scrollTop; if (osTop >= clientHeight) { oscrollBtn.style.display = ‘block‘; } else { oscrollBtn.style.display = ‘none‘; } //Triggered when the scroll bar rolls window.onscroll = function () { var osTop = document.documentElement.scrollTop || document.body.scrollTop; if (osTop >= clientHeight) { oscrollBtn.style.display = ‘block‘; } else { oscrollBtn.style.display = ‘none‘; } if (!isTop) { clearInterval(timer); } isTop = false; } oscrollBtn.onclick = function () { //Set timer timer = setInterval(function () { //Gets the height of the scroll bar var osTop = document.documentElement.scrollTop || document.body.scrollTop; //The scroll bar slows down var ispeed = Math.ceil(osTop / 6); document.documentElement.scrollTop = document.body.scrollTop = osTop - ispeed; isTop = true; if (osTop == 0) { clearInterval(timer); } }, 30); } }
原文地址:https://www.cnblogs.com/yadongliang/p/9313583.html
时间: 2024-11-02 01:46:36