Verwenden Sie native JS, um einen einfachen Gleiteffekt zu erzielen und zu den top_javascript-Fähigkeiten zurückzukehren

Auf vielen Webseiten befindet sich unten auf der Seite die Schaltfläche „Zurück zum Anfang“, insbesondere auf Webseiten ohne Navigation. Dies kann Besuchern helfen, die Navigation wiederzufinden oder die Anzeige zu überprüfen (was für eine schöne Idee). Da JavaScript in den letzten Jahren immer häufiger verwendet wird, sind Sliding-Effekte allgegenwärtig, also bin ich diesem Beispiel gefolgt und habe die Funktion „Return to Top“ zu einem Sliding-Effekt gemacht. Um den physikalischen Eigenschaften besser zu entsprechen, wurde es später so modifiziert, dass es einen bremsenden Gleiteffekt hatte.

Lassen Sie uns zunächst über das Prinzip sprechen. Wir ermitteln den Abstand von der Bildlaufleiste zum oberen Rand der Seite und verschieben ihn dann um einen bestimmten Abstand nach oben. und bewege es um eine bestimmte Distanz nach oben (etwas kleiner als beim letzten Mal); Und so weiter...

<script type="text/javascript"> 
/** 
* 回到页面顶部 
* @param acceleration 加速度 
* @param time 时间间隔 (毫秒) 
**/
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; 

// 滚动条到页面顶部的水平距离 
var x = Math.max(x1, Math.max(x2, x3)); 
// 滚动条到页面顶部的垂直距离 
var y = Math.max(y1, Math.max(y2, y3)); 

// 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小 
var speed = 1 + acceleration; 
window.scrollTo(Math.floor(x / speed), Math.floor(y / speed)); 

// 如果距离不为零, 继续调用迭代本函数 
if(x > 0 || y > 0) { 
var invokeFunction = "goTop(" + acceleration + ", " + time + ")"; 
window.setTimeout(invokeFunction, time); 
} 
} 
</script>

document.documentElement.scrollTop, document.body.scrollTop, window.scrollY sind eigentlich gleich, funktionieren aber nur in einigen Browsern. Welche davon in welchen Browsern funktioniert, können Sie selbst debuggen.

Wie benutzt man?

Code kopieren Der Code lautet wie folgt:

TOP