Javascript implementation Back to Top special effect _ javascript tips-js tutorial

When the page is particularly long, you must scroll back to the top of the page several times before returning to the top. If there is a "Back to Top" button in the bottom right corner of the page, click, you can return to the top, which is a good experience for users. HTML:

CSS:

#btn1{position:fixed;bottom:10px;right:10px;}

JS:

Window. onload = funcition () {var oBtn = document. getElementById ("btn"); var timer = null; // declare a variable to see if it is a system or if the user rolls var sBys = true; window. onscroll = funcition () {if (! SBys) {clearInterval (timer);} sBys = false;} oBtn. onclick = funcition () {timer = setInterval (funcition () {// obtain scrollTop var scrollTop=document.doc umentElement. scrollTop | document. body. scrollTop; // calculate the buffer speed var ispeed = Math when the button is clicked back to the top. floor (-scrollTop/8); if (scrollTop = 0) {clearInterval (timer)} sBys = true; document.doc umentElement. scrollTop = document. body. scrollTop = scrollTop + ispeed;}, 30 )}}

Knowledge point:

1. computation speed (buffer) rounded down
2. When scrollTop = 0, the timer needs to be cleared.
3. You need to determine whether it is a user or js operation scroll bar. If it is a user operation, clear the timer.

The above is all the content of this article. I hope you will like it.