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
Beispiel für die Verwendung verschachtelter HTML-Seiten (Frameset-Verwendung)
Code kopieren Der Code lautet wie folgt: <!DOC...
Installieren Sie die MySQL5.5-Datenbank in einer CentOS7-Umgebung
Inhaltsverzeichnis 1. Prüfen Sie, ob MySQL auf de...
Detaillierte Schritte für Navicat zur Remote-Verbindung mit SQL Server und zur Konvertierung nach MySQL
Vorwort Kürzlich stieß ich in einem Projekt auf e...
Detaillierte Erklärung zum Anpassen des Linux-Befehlsverlaufs
Der Befehl „Bash History“ im Linux-System hilft d...
Erläuterung zu JavaScript-Anti-Shake und -Throttling
Inhaltsverzeichnis Stabilisierung Drosselung Zusa...
Tutorial zur HTML-Tabellenauszeichnung (48): CSS-modifizierte Tabelle
<br />Sehen wir uns nun an, wie Sie die CSS-...
Detaillierte Erklärung zur Verwendung benutzerdefinierter Parameter in MySQL
Zu den MySQL-Variablen zählen Systemvariablen und...
Zusätzliche Anweisungen zur Verwendung von Gettern und Aktionen in Vuex
Vorbemerkungen 1.Unterschiede zwischen Vue2.x und...
Einfaches Verständnis und Beispiele für MySQL Index Pushdown (ICP)
Vorwort Index Condition Pushdown (ICP) ist eine n...
Mysql 5.7.17 Winx64-Installationstutorial auf Win7
Softwareversion und Plattform: MySQL-5.7.17-winx6...
Lösungen für Kompatibilitätsprobleme mit virtuellen VMware-Workstation-Maschinen
Wie lassen sich Kompatibilitätsprobleme mit virtu...
Analyse der MySQL-Ansichtsfunktionen und Anwendungsbeispiele
Dieser Artikel veranschaulicht anhand von Beispie...
Tutorial zur Änderung des Root-Passworts in MySQL 5.6
1. Nach der Installation von MySQL 5.6 kann es ni...
So erstellen Sie PHP7 mit einem benutzerdefinierten Docker-Image
Führen Sie zunächst eine einfache Docker-Installa...
Zusammenfassung der MySQL-Zeichensätze
Inhaltsverzeichnis Zeichensatz Vergleichsregeln V...