JavaScript code to achieve variable speed back to the top

JavaScript code to achieve variable speed back to the top_javascript skills

WBOY

Release： 2016-05-16 18:06:47

Original

1268 people have browsed it

As the application of JavaScript has become more and more widespread in recent years, sliding effects are everywhere, so I followed suit and made the top function a sliding effect. Later, in order to better fit the physical characteristics, it was transformed into a decelerating sliding effect.
First let’s talk about the principle. We will get the distance from the scroll bar to the top of the page, and then move it up a certain distance; then get the distance from the scroll bar to the top of the page, and move it up a certain distance (a little smaller than the last time); . ..
JavaScript code:

Copy code The code is as follows:

 
/**
* Back to top of page 
* @param acceleration acceleration 
* @param time time interval (milliseconds) 
**/ 
function goTop(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 Horizontal distance to the top of the page 
var x = Math.max(x1, Math.max(x2, x3)); 
// 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 smaller the distance is, the speed is a number greater than 1, so the rolling distance will become smaller and smaller
 var speed = 1 acceleration; 
window.scrollTo(Math.floor(x / speed), Math.floor(y / speed)); 
// If the distance is not zero, continue to call this iteration function
if(x > 0 || y > 0) { 
var invokeFunction = "goTop(" acceleration ", " time ")"; 
window.setTimeout(invokeFunction, time); 
} 
} 

document.documentElement.scrollTop, document.body.scrollTop, window.scrollY are actually the same, but they only work in some browsers. As for which one? You can debug which browsers work for you.
HTML code:

Copy code The code is as follows:

TOP