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
So installieren Sie den Kibana-Tokenizer im Docker-Container
Schritt: 1. Erstellen Sie eine neue Datei docker-...
Detaillierte Anweisungen zum Download und Installationsprozess von MySQL 5.7.18
MySql herunterladen 1. Öffnen Sie die offizielle ...
Analysieren Sie, wie Sie automatisch Vue-Komponentendokumentation generieren
Inhaltsverzeichnis 1. Aktuelle Situation 2. Commu...
Beispiele für allgemeine Operationen mit MySQL-Fremdschlüsseleinschränkungen [Anzeigen, Hinzufügen, Ändern, Löschen]
In diesem Artikel werden anhand von Beispielen al...
Grafisches Tutorial zur Installation von MySQL 5.6.35 unter Windows 10 64-Bit
1. Laden Sie MySQL Community Server 5.6.35 herunt...
Häufige Probleme bei der Implementierung der Fortschrittsbalkenfunktion von vue Nprogress
NProgress ist der Fortschrittsbalken, der oben im...
6 Möglichkeiten, die von Linux-Prozessen belegten Portnummern anzuzeigen
Für Linux-Systemadministratoren ist es von entsch...
Zusammenfassung der Fallstricke bei der Verwendung von Nginx als Reverse-Proxy für GRPC
Hintergrund Wie wir alle wissen, ist Nginx ein Ho...
So lösen Sie das Problem von -bash: /usr/bin/yum: Keine solche Datei oder kein solches Verzeichnis nach der Eingabe von yum in Linux
Nach der Eingabe von yum in Linux erscheint die E...
Das WeChat-Applet implementiert einen einfachen Rechner
Ein einfacher Rechner, der als Referenz in das We...
Implementierung der automatischen Vervollständigung von Docker-Befehlen
Vorwort Ich weiß nicht, wie lange dieser Freund D...
Windows kann den MySQL-Dienst nicht starten und meldet Fehler 1067 – Lösung
Als ich mich bei MySQL anmeldete, wurde mir plötz...
Praktische Methode zum Upgrade von PHP auf 5.6 unter Linux
1: Überprüfen Sie die PHP-Version nach dem Aufruf...
jQuery manipuliert Cookies
Code kopieren Der Code lautet wie folgt: jQuery.c...
So fügen Sie einen Wert mit einfachen Anführungszeichen oder Backslashes in MySQL-Anweisungen ein
Vorwort Dieser Artikel stellt hauptsächlich den r...