Recently, I have been imitating the page style and interaction of major websites, and found that many of them have the need to go back to the top, so I wrote about js and recorded it.
I found that the animation effect from fast to slow and the function of pulling down the scroll bar to stop scrolling at any time. I referred to the relevant courses on imooc, and finally implemented the JS code as follows:
//Trigger window.onload = function(){ var btn = document.getElementById('btn'); var timer = null; var isTop = true; //Get the page viewing area height var clientHeight = document.documentElement.clientHeight; //Trigger window.onscroll = function() { //Show back to top button var osTop = document.documentElement.scrollTop || document.body.scrollTop; if (osTop >= clientHeight) { btn.style.display = "block"; } else { btn.style.display = "none"; }; //In the process back to the top, the user scrolls the scrollbar and stops the timer if (!isTop) { clearInterval(timer); }; isTop = false; }; btn.onclick = function() { //Set timer timer = setInterval(function(){ //Get the scrollbar's height from the top var osTop = document.documentElement.scrollTop || document.body.scrollTop; var ispeed = Math.floor(-osTop / 7); document.documentElement.scrollTop = document.body.scrollTop = osTop+ispeed; //Add to the top and clear the timer if (osTop == 0) { clearInterval(timer); }; isTop = true; },30); };};The above simple example of the animation effect of JS to return to the top of the page is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.