Zusammenfassung mehrerer Implementierungen der Rückkehr zum Anfang in HTML-Seiten
|
Vor kurzem musste ich beim Entwickeln einer Website eine Schaltfläche zum Zurück-nach-oben-Schreiben erstellen, aber ich beschäftige mich hauptsächlich mit der Backend-Entwicklung und bin mit dem Frontend nicht sehr vertraut. Nach einer Online-Suche habe ich eine Schaltfläche zum Zurück-nach-oben-Schreiben erstellt. Hier sind zwei einfache Möglichkeiten, sie aufzuzeichnen. Freunde, denen diese Website gefällt, können sie als Lesezeichen speichern. Die Lernmaterialien werden von Zeit zu Zeit aktualisiert. Der erste: Verweisen Sie auf externes jQuery Erstellen Sie eine neue HTML-Seite, kopieren und speichern Sie den folgenden Code und öffnen Sie ihn in einem Browser, um die Wirkung zu sehen.
<!doctype html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
.Pfeil{
Rand: 9px durchgehend transparent;
Rahmenunterseite-Farbe: #3DA0DB;
Breite: 0px;
Höhe: 0px;
oben: 0px
}
.Stock{
Breite: 8px;
Höhe: 14px;
Rahmenradius: 1px;
Hintergrundfarbe: #3DA0DB;
oben: 15px;
}
#zurück_nach oben div{
Position: absolut;
Rand: automatisch;
rechts: 0px;
links: 0px;
}
#zurück_nach oben{
Hintergrundfarbe: #dddddd;
Höhe: 38px;
Breite: 38px;
Rahmenradius: 3px;
Anzeige: Block;
Cursor: Zeiger;
Position: fest;
rechts: 50px;
unten: 100px;
Anzeige: keine;
}
</Stil>
</Kopf>
<Text>
<div id="Artikel"></div>
<div id="zurück_nach oben">
<div Klasse="Pfeil"></div>
<div Klasse="Stick"></div>
</div>
<script src="http://cdn.staticfile.org/jquery/1.11.1-rc2/jquery.min.js"></script>
<Skript>
$(Funktion(){
für(var i =0 ;i <100;i++){
$("#article").anhängen("<p>xxxxxxxxxx<br></p>")
}
})
</Skript>
<Skript>
$(Funktion(){
$(window).scroll(function(){ //Solange das Fenster scrollt, wird folgender Code ausgelöst var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //Höhe nach dem Scrollen abrufen if( scrollt >200 ){ //Wenn die Höhe nach dem Scrollen 200px überschreitet, zeige $("#back_top").fadeIn(400); //Einblenden }else{
$("#back_top").stop().fadeOut(400); //Wenn es zurückkehrt oder nicht überschreitet, wird ausgeblendet. Sie müssen stop() hinzufügen, um die vorherige Animation zu stoppen, andernfalls blinkt sie.}
});
$("#back_top").click(function(){ //Wenn Sie auf die Beschriftung klicken, verwenden Sie Animate, um innerhalb von 200 Millisekunden nach oben zu scrollen$("html,body").animate({scrollTop:"0px"},200);
});
});
</Skript>
</body>
</html>Die zweite Methode: Verwenden Sie CSS und spezielle Symbole zum Einstellen Der gesamte Code erstellt eine einfache und schöne Schaltfläche „Zurück nach oben“. Kopieren Sie den Code wie oben in die HTML-Datei und öffnen Sie sie, um den Effekt zu sehen.
<!doctype html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
#zurück_nach oben{
Anzeige:Block;
Breite: 60px;
Höhe: 60px;
Position: fest;
unten: 50px;
rechts: 40px;
Rahmenradius: 10px 10px 10px 10px;
Textdekoration: keine;
Anzeige: keine;
Hintergrundfarbe: #999999;
}
#zurück_nach oben span{
Anzeige:Block;
Breite: 60px;
Farbe: #dddddd;
Schriftgröße: 40px;
Textausrichtung: zentriert;
Rand oben: 4px;
}
#zurück_top span:hover{
Farbe: #cccccc;
}
</Stil>
</Kopf>
<Text>
<div id="Artikel"></div>
<a id="zurück_oben" href="script:;">
<span>⌆</span>
</a>
</div>
<Skript>
$(Funktion(){
für(var i =0 ;i <100;i++){
$("#article").anhängen("<p>xxxxxxxxxx<br></p>")
}
})
</Skript>
<Skript>
$(Funktion(){
$(window).scroll(function(){ //Solange das Fenster scrollt, wird folgender Code ausgelöst var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //Höhe nach dem Scrollen abrufen if( scrollt >200 ){ //Wenn die Höhe nach dem Scrollen 200px überschreitet, zeige $("#back_top").fadeIn(400); //Ausblenden }else{
$("#back_top").stop().fadeOut(400); //Wenn es zurückkehrt oder nicht überschreitet, wird es eingeblendet. Sie müssen stop() hinzufügen, um die vorherige Animation zu stoppen, andernfalls blinkt sie.}
});
$("#back_top").click(function(){ //Wenn Sie auf die Beschriftung klicken, verwenden Sie Animate, um innerhalb von 200 Millisekunden nach oben zu scrollen$("html,body").animate({scrollTop:"0px"},200);
});
});
</Skript>
</body>
</html>Die beiden oben genannten Methoden liefern nur Ideen, Sie können sie direkt verwenden und die gewünschten spezifischen Symbole selbst debuggen. Ich hoffe, dass sie für das Lernen aller hilfreich sind, und ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützt. |
<<: Was wir über absolute und relative CSS-Werte zu sagen haben
Artikel empfehlen
Detaillierte Erklärung des Sandbox-Mechanismus von Vue3
Inhaltsverzeichnis Vorwort Browser kompilierte Ve...
So lösen Sie das Problem, dass MySQL nicht gestartet werden kann, da keine temporären Dateien erstellt werden können
Problembeschreibung Ich hatte kürzlich ein Proble...
Detaillierte Erläuterung der MySQL-Deadlock-Prüfung und Beispiele zur Deadlock-Entfernung
1. Abfragevorgang Prozessliste anzeigen 2. Fragen...
Nodejs verwendet Readline, um zur Eingabe von Beispielcode für Inhalte aufzufordern
Inhaltsverzeichnis Vorwort 1. bat führt js aus 2....
Detaillierte Erklärung von Javascript-Closures und -Anwendungen
Inhaltsverzeichnis Vorwort 1. Was ist ein Abschlu...
MySql Installer 8.0.18 Visuelles Installationstutorial mit Bildern und Text
Inhaltsverzeichnis 1. MySQL 8.0.18 installieren 2...
JavaScript-Grundlagen dieser Verweisung
Inhaltsverzeichnis Das Verfahren Im Objekt Verste...
Detaillierte Erläuterung des Dockerfiles zum Erstellen eines benutzerdefinierten Docker-Images und Vergleich der CMD- und ENTRYPOINT-Anweisungen
1. Übersicht Es gibt drei Möglichkeiten, ein Dock...
Austausch von Ideen zur Verarbeitung von Millionen von Daten in einer einzigen MySQL-Tabelle
Inhaltsverzeichnis Projekthintergrund Verbesserun...
XHTML-Tutorial für den Einstieg: Formular-Tags
<br />Formulare sind für Benutzer ein wichti...
Ubuntu-Installations-Grafiktreiber und CUDA-Tutorial
Inhaltsverzeichnis 1. Deinstallieren Sie den Orig...
Verwendung des Linux-Befehls ifconfig
1. Befehlseinführung Der Befehl ifconfig (Netzwer...
So verhindern Sie, dass Benutzer Webseiteninhalte mit reinem CSS kopieren
Vorwort Als ich mein eigenes persönliches Blog sc...
Bringen Sie Ihnen bei, wie Sie den Beobachtermodus in Javascript implementieren
Inhaltsverzeichnis Was ist das Beobachtermuster? ...
Verwenden Sie jQuery, um das Problem mit ungültigen Seitenankerpunkten unter Iframe zu beheben
Das Anwendungsszenario ist: Die Iframe-Seite hat k...