Wie man schreibt
【1】 Ankerpunkt
Die Verwendung von Ankerlinks ist eine einfache Rückkehr nach oben. Diese Implementierung legt hauptsächlich einen Ankerlink mit einem bestimmten Namen oben auf der Seite und dann einen Link, um zum Anker unter der Seite zurückzukehren. Der Benutzer klickt auf den Link, um in die oberste Position zurückzukehren, in der sich der Anker befindet.
[Hinweis] Hier werden detaillierte Informationen zu Anchor -Punkten verschoben
<body style = "height: 2000px;"> <div id = "topanchor"> </div> <a href = "#topanchor" style = "Position: behoben; rechts: 0; unten: 0"> Zurück nach oben </a> </body>
【2】 Scrolltop
Die Scrolltop -Eigenschaft gibt die Anzahl der über dem Inhaltsbereich versteckten Pixel an. Wenn das Element nicht scrolliert wird, beträgt der Wert von Scrolltop 0. Wenn das Element vertikal scrolliert wird, ist der Wert von Scrolltop größer als 0 und zeigt die Pixelbreite des unsichtbaren Inhalts über dem Element an.
Da Scrolltop beschreibbar ist, kann Scrolltop verwendet werden, um die Funktion wieder nach oben zu erreichen
[Hinweis] Details zu den Kompatibilitätsproblemen von Scrolltop auf der Seite werden hier verschoben
<body style = "height: 2000px;"> <button id = "test" style = "Position: Behoben; rechts: 0; unten: 0"> Zurück nach oben </button> <script> test.onclick = function () {document.body.scrolltop = document.documentelement.scrolltop = 0;【3】 scrollto ()
Scrollto (x, y) -Methode Scrollen Das im aktuelle Fenster angezeigte Dokument, so dass die durch die Koordinaten x und y im Dokument angegebenen Punkte in der oberen linken Ecke des Anzeigebereichs befinden.
Setzen Sie Scrollto (0,0), um den Effekt der Rückkehr nach oben zu erreichen
<body style = "Höhe: 2000px;"> <button id = "test" style = "Position: Behoben; rechts: 0; unten: 0"> Zurück nach oben </button> <skript> test.onclick = function () {Scrollto (0,0);} </script> </body>【4】 Scrollby ()
Scrollby (x, y) -Methode Scrollen Das im aktuelle Fenster angezeigte Dokument Geben Sie die relative Scrolling an
Verwenden Sie einfach die Bildlauflänge der aktuellen Seite als Parameter und scrollen Sie umgekehrt. Sie können den Effekt der Rückkehr nach oben erreichen.
<body style = "height: 2000px;"> <button id = "test" style = "Position: behoben; rechts: 0; unten: 0"> Zurück nach oben </button> <script> test.onclick = function () {var top = document.body.scrolltoptop || document.documentElement.scrolltopscrollby (0, -top);} </script> </body>【5】 scrollintoview ()
Element.Scrollintoview -Methode scrollt das aktuelle Element und tritt in den sichtbaren Bereich des Browsers ein.
Diese Methode kann einen Booleschen Wert als Parameter akzeptieren. Wenn dies der Fall ist, bedeutet dies, dass die Oberseite des Elements mit der Oberseite des sichtbaren Teils des aktuellen Bereichs ausgerichtet ist (vorausgesetzt, der aktuelle Bereich ist scrollbar); Wenn dies falsch ist, bedeutet dies, dass der Boden des Elements mit dem Schwanz des sichtbaren Teils des aktuellen Bereichs ausgerichtet ist (vorausgesetzt, der aktuelle Bereich ist scrollbar). Wenn dieser Parameter nicht bereitgestellt wird, ist die Standardeinstellung wahr
Das Prinzip der Verwendung dieser Methode ähnelt dem Prinzip der Verwendung von Ankerpunkten. Stellen Sie das Zielelement oben auf der Seite ein. Wenn die Seite scrolliert, wird das Zielelement außerhalb des Seitenbereichs gescrollt. Klicken Sie auf die obere Taste zurück, um zur ursprünglichen Position zurückzukehren und den erwarteten Effekt zu erzielen.
<body style = "height: 2000px;"> <div id = "target"> </div> <button id = "test" style = "Position: behoben; rechts: 0; unten: 0"> Zurück zu oben </button> <script> test.onclick = function () {target.scrollintoview ();} </script> </body> body> body> {)Erweitert
Das Folgende verbessert die Funktion wieder nach oben
【1】 Verbesserung zeigen
Verwenden Sie CSS, um "wieder nach oben" in eine visuelle Grafik zu zeichnen und zu verwandeln (wenn sie mit IE8-Browser kompatibel sind, verwenden Sie stattdessen Bilder).
Verwenden Sie CSS Pseudo-Element- und Pseudo-Hover-Effekte. Wenn sich die Maus zum Element bewegt, wird der Text nach oben angezeigt und erscheint nicht, wenn es ausgeweitet wird.
<Styles> .box {Position: Behoben; rechts: 10px; unten: 10px; Höhe: 30px; Breite: 50px; Text-Align: Mitte; Padding-Top: 20px; Hintergrundfarbe: Lichtblau; Border-Radius: 20%; Überlauf: versteckt;}. Box: Schwebe: Vor {oben: 50%}. Box: Hover .box-in {Sichtbarkeit: versteckt;}. Box: Vor {Position: Absolut; Top: -50%; 40px; Farbe: Peru; Schriftgewicht: fett;} .box-in {Sichtbarkeit: sichtbar; Anzeige: Inline-Block; Höhe: 20px; Breite: 20px; Rand: 3px solid schwarz; Border-Farbe: Weiß transparent transparent weiß: rotieren (45-g. id = "box"> <div> </div> </div> </body>【2】 Animationsverbesserung
Um Animation nach oben hinzuzufügen, rollt die Bildlaufleiste mit einer bestimmten Geschwindigkeit wieder nach oben zurück
Es gibt zwei Arten von Animationen: Eine ist CSS -Animation, die Stiländerungen und Übergang erfordert; Die andere ist die JavaScript -Animation, die einen Timer verwendet, um sie zu implementieren.
In den oben genannten 5 -Implementierungen können die Methoden Scrolltop, Scrollto () und Scrollby () Animationen hinzufügen, und da es keine Stiländerung gibt, können nur JavaScript -Animationen hinzugefügt werden
Der Timer kann verwendet werden, setInterval, setTimeout und RequestArimationFrame. Das Folgende ist die Verwendung des Timer-RequestanimationFrame für Timer-Timer, um es zu implementieren.
[Hinweis] IE9-Browser unterstützt diese Methode nicht, sondern können SetTimeout für die Kompatibilität verwenden
1. Hinzufügen von Scrolltop -Animationseffekt
Reduzieren Sie mit einem Timer den Scrolltop -Wert jedes Mal um 50, bis er auf 0 reduziert ist, und die Animation ist abgeschlossen
<Script> var timer = null; box.onclick = function () {crossnimationFrame (Timer); Timer = RequestAnimationFrame (Funktion fn () {var otop = document.body.scrolltop || document.documentElement.scrolltop; if (otop> 0) {document.body.body.Sbody.Sbody. 50; Timer = RequestAnimationFrame (fn);} else {cancelAnimationFrame (Timer);}});} </script>2. Fügen Sie Scrollto () Animationseffekt hinzu
Holen Sie sich den y -Parameter in Scrollto (x, y) durch den Scrolltop -Wert, reduzieren Sie ihn jedes Mal um 50, bis er auf 0 reduziert ist, und die Animation ist fertig
<Script> var timer = null; box.onclick = function () {crossnimationFrame (Timer); Timer = RequestAnimationFrame (Funktion fn () {var otop = document.body.scrolltop || document.documentElement.scrolltop; RequestAnimationFrame (fn);} else {CRANDANIMATIONFRAME (Timer);}});} </script>3. Fügen Sie Scrollby () Animationseffekt hinzu
Stellen Sie den y -Parameter in Scrollby (x, y) auf -50 ein, bis der Scrolltop 0 ist, und dann stoppt der Rollback
<Script> var timer = null; box.onclick = function () {crossnimationFrame (Timer); Timer = RequestAnimationFrame (Funktion fn () {var otop = document.body.scrolltop || document.documentElement.scrollTop; RequestAnimationFrame (fn);} else {CRANDANIMATIONFRAME (Timer);}});} </script>erreichen
Da Scrolltop, Scrollby () und Scrollto () Methoden alle verwenden, ob der Scrolltop -Wert auf 0 als Referenz für das Stoppen von Animationen reduziert wird und die Prinzipien und Implementierungen der drei Animationen im Grunde ähnlich sind und die Leistung auch ähnlich ist. Schließlich wird der Effekt zur Verbesserung der Animation mit dem am häufigsten verwendeten Scrolltop -Attribut erreicht
Wenn Sie der Meinung sind, dass die Geschwindigkeit von 50 nicht geeignet ist, können Sie sie entsprechend der tatsächlichen Situation anpassen
<Styles> .box {Position: Behoben; rechts: 10px; unten: 10px; Höhe: 30px; Breite: 50px; Text-Align: Mitte; Padding-Top: 20px; Hintergrundfarbe: Lichtblau; Border-Radius: 20%; Überlauf: versteckt;}. Box: Schwebe: Vor {oben: 50%}. Box: Hover .box-in {Sichtbarkeit: versteckt;}. Box: Vor {Position: Absolut; Top: -50%; 40px; Farbe: Peru; Schriftgewicht: fett;} .box-in {Sichtbarkeit: sichtbar; Anzeige: Inline-Block; Höhe: 20px; Breite: 20px; Rand: 3px solid schwarz; Border-Farbe: Weiß transparent transparent weiß: rotieren (45-g. id = "box"> <div> </div> </div> </body> <script> var timer = null; box.onclick = function () {cancelAnimationFrame (Timer); Timer = RequestAnimationFrame (Funktion fn () {var otop = document.body.scrolltop || document. 0) {document.body.scrolltop = document.documentElement.scrolltop = otop - 50; Timer = RequestAnimationFrame (fn);} else {cancelanimationFrame (Timer);}});} </script>Das obige ist die vollständige Beschreibung der fünf Schreibmethoden (von der Implementierung bis zur Verbesserung) basierend auf der JS -Implementierung zu Ihnen, die ich Ihnen vorgestellt habe. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht. Der Herausgeber wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung für die Wulin Network -Website!