Make a simple return to the top with native JavaScript

Many pages have a "back to top" button underneath, especially one that doesn't have navigation at the bottom of the page, which can help visitors navigate again or revisit the ad (think it's beautiful). With the increasing use of JavaScript in recent years, the sliding effect is everywhere, so I also follow the following, will return to the top of the function made of sliding effect. Later, in order to better fit the physical characteristics, the transformation made a deceleration of the sliding effect.

First, let's say the principle, we will get the scroll bar to the top of the page distance, and then move up a certain distance, and then get the scroll bar to the top of the page distance, move up a certain distance (smaller than the previous);

First on the code: Yong Ying Entertainment casino

<script type= "Text/javascript" >/** * back to top of page * @param acceleration acceleration * @param  Time interval (msec) **/function gotop (acceleration, time) {acceleration = Acceleration | | 0.1;time = Time | |; var x1 = 0;var y1 = 0;var x2 = 0;var y2 = 0;var x3 = 0;var y3 = 0; if (document.documentelement) {x1 = Document.documentElement.scrollLeft | | 0;y1 = DOCUMENT.DOCUMENTELEMENT.SCROLLTOP | | 0;} if (document.body) {x2 = Document.body.scrollLeft | | 0;y2 = DOCUMENT.BODY.SCROLLTOP | | 0;} var x3 = Window.scrollx | | 0;var y3 = window.scrolly | | 0; The horizontal distance from the scroll bar to the top of the page var x = Math.max (x1, Math.max (x2, x3));//The vertical distance from the scroll bar to the top of the page var y = Math.max (y1, Math.max (y2, y3)); Scrolling distance = current distance/speed, because the distance is smaller, the speed is greater than 1 of the number, so the rolling distance will be more and more small var speed = 1 + acceleration;window.scrollto (Math.floor (x/speed), Math.floor (y/speed)); If the distance is nonzero, continue calling the iteration function if (x > 0 | | y > 0) {var invokefunction = "Gotop (" + Acceleration + "," + Time + ")"; window.set Timeout (invokefunction, Time);}} </script> 

Effect demo back to top

Document.documentElement.scrollTop, Document.body.scrollTop, window.scrolly are actually the same, but they only work in some browsers. As for that which in which browser functions can debug itself.

How to use?

<a href= "#" onclick= "Gotop (); return false;" >TOP</a>

Make a simple return to the top with native JavaScript