Viele Webseiten platzieren unten eine "Back to Top" -Taste, insbesondere auf Webseiten, auf denen keine Navigation am Ende der Seite vorhanden ist, wodurch die Besucher wieder die Navigation finden oder die Anzeige erneut besuchen (sie ist so schön). Da JavaScript in den letzten Jahren immer häufiger eingesetzt wird, ist der Gleiteffekt überall, so dass ich dem Trend verfolgt und die Rückkehr zur obersten Funktion gemacht habe, um einen Gleiteffekt zu erzielen. Später, um die physikalischen Eigenschaften besser anzupassen, wurde der Gleiteffekt der Verlangsamung transformiert.
Sprechen wir zuerst über das Prinzip. Wir werden die Entfernung von der Bildlaufleiste bis zum oberen Rand der Seite erhalten und sie dann um eine bestimmte Entfernung nach oben bewegen. Nehmen Sie dann die Entfernung von der Bildlaufleiste bis zum oberen Rand der Seite und bewegen Sie sie mit einer bestimmten Entfernung (etwas kleiner als beim letzten Mal). und so weiter...
<skript type = "text/javaScript">/*** Zurück zum oberen Rand der Seite* @param Acceleration Acceleration* @param Zeitintervall (ms) **/Funktion GOTOP (Beschleunigung, Zeit) {Acceleration = Acceleration || 0,1; Zeit = Zeit || 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; // Horizontale Entfernung von der Bildlaufleiste bis zum oberen Rand der Seite var x = math.max (x1, math.max (x2, x3)); // vertikaler Abstand von der Bildlaufleiste bis zum oberen Rand der Seite var y = math.max (y1, math.max (y2, y3)); // Scrollenabstand = Stromabstand/Geschwindigkeit, da die Entfernung kleiner ist und die Geschwindigkeit größer als 1 ist, wird der Scrolling -Abstand immer kleiner und kleinerer VaR -Geschwindigkeit = 1 + Beschleunigung; window.scrollto (math.floor (x / speed), math.floor (y / speed)); // Wenn die Entfernung nicht Null ist, rufen Sie die Iterationsfunktion weiter auf, wenn (x> 0 || y> 0) {var invokefunction = "gotop (" + Beschleunigung + "," + Zeit + ")"; window.settimeout (invokefunction, time); }} </script>document.documentElement.scrolltop, document.body.scrolltop, window.scolly sind tatsächlich gleich, aber sie arbeiten nur in einigen Browsern. Was die Browser funktionieren, können Sie es selbst debuggen.
Wie benutze ich es?
Die Codekopie lautet wie folgt:
<a href = "#" onclick = "gotop (); return false;"> top </a>