JavaScript implementation back to top effects

When the page is very long, users want to go back to the top of the page, you must scroll several times to scroll to the top, if the lower right corner of the page has a "back to the Top" button, the user clicks, you can go back to the top, for users, is a better experience.

Html:

?

1	<input id= "btn1" type= "button" value= "Back to Top"/>

Css:

?

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

Js:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24-25

Window.onload=funcition () {var Obtn=document.getelementbyid ("btn"); var timer=null;//Declare a variable to see if it is a system or user scrolling var sbys= True Window.onscroll=funcition () {if (!sbys) {clearinterval (timer);} Sbys=false;} obtn.onclick=funcition () {timer = SetInterval (Funcition () {//Get scrolltop var scrolltop=document.documentelement.scrolltop| | Document.body.scrollTop; When the Click button returns to the top, compute the buffer speed of Var ispeed=math.floor (-SCROLLTOP/8); if (scrolltop==0) {clearinterval (timer)} sbys=true; Document.documentelement.scrolltop=document.body.scrolltop=scrolltop+ispeed; },30)}}

Knowledge Points:

1. Calculate the speed (buffer) to take down the whole

2. Need to clear timer when scrolltop==0

3. Need to determine whether the user or JS operation of the scroll bar, if it is user action to clear the timer

The above mentioned is the entire content of this article, I hope you can enjoy.

        Note < : More Wonderful tutorials please focus on the triple Programming