Using native JS to do a simple sliding effect back to the top of _javascript tips

Many pages will have a "back to the Top" button below, especially if there is no navigation at the bottom of the page, which will help visitors to find the navigation or revisit the ad (really beautiful). With the application of JavaScript in recent years more and more extensive, sliding effect everywhere, so I also follow the bandwagon, will return to the top function made a sliding effect. Later, in order to better fit the physical characteristics of the transformation made a deceleration sliding effect.

First of all, 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, up a certain distance (smaller than the previous one);

<script type= "Text/javascript" >/** * back to top of page * @param acceleration acceleration * @param time interval (milliseconds) **/function go 
Top (acceleration, time) {acceleration = acceleration | | 0.1; Time = Time | | 

16; 
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; 
scroll bar to horizontal distance at the top of the page var x = Math.max (x1, Math.max (x2, x3)); 

The vertical distance of the scroll bar to the top of the page var y = Math.max (y1, Math.max (y2, y3)); 
Rolling distance = current distance/speed, because the smaller distance, 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 not zero, continue to invoke the iteration this function if (x > 0 | | | y > 0) {var invokefunction = "Gotop (" + Acceleration + "," + Time + ")"; Window.settimeout (Invokefunction, Time); }} </script>

Document.documentElement.scrollTop, Document.body.scrollTop, window.scrolly are all the same, but they only work in some browsers. As for which browsers work, you can debug yourself.

How to use it?

Copy Code code as follows:

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