jQuery kombiniert mit CSS, um die Funktion „Zurück zum Anfang“ zu erreichen
|
CSS-Operationen
CSS
$("").css(name|pro|[,val|fn])
Position$("").offset([Koordinaten])
$("").position()
$("").scrollTop([Wert])
$("").scrollLeft([Wert])
Größe $("").height([val|fn])
$("").Breite([Wert|fn])
$("").innerHeight()
$("").innerWidth()
$("").äußereHöhe([Optionen])
$("").äußereBreite([Optionen])Beispiel Zurück nach oben
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
<script src="js/jquery-2.2.3.js"></script>
<Skript>
Fenster.Onscroll=Funktion(){
var current=$(window).scrollTop();
console.log(aktuell)
wenn (aktuell>100){
$(".returnTop").removeClass("ausblenden")
}
anders {
$(".returnTop").addClass("ausblenden")
}
}
Funktion returnTop(){
// $(".div1").scrollTop(0);
$(window).scrollTop(0)
}
</Skript>
<Stil>
Körper{
Rand: 0px;
}
.returnTop{
Höhe: 60px;
Breite: 100px;
Hintergrundfarbe: dunkelgrau;
Position: fest;
rechts: 0;
unten: 0;
Farbe: grüngelb;
Zeilenhöhe: 60px;
Textausrichtung: zentriert;
}
.div1{
Hintergrundfarbe: Orchidee;
Schriftgröße: 5px;
Überlauf: automatisch;
Breite: 500px;
}
.div2{
Hintergrundfarbe: Dunkelcyan;
}
.div3{
Hintergrundfarbe: Aqua;
}
.div{
Höhe: 300px;
}
.verstecken{
Anzeige: keine;
}
</Stil>
</Kopf>
<Text>
<div Klasse="div1 div">
<p>Hallo</p>
<p>Hallo</p>
<p>Hallo</p>
<p>Hallo</p>
<p>Hallo</p>
<p>Hallo</p>
<p>Hallo</p>
<p>Hallo</p>
<p>Hallo</p>
<p>Hallo</p>
<p>Hallo</p>
<p>Hallo</p>
<p>Hallo</p>
<p>Hallo</p>
<p>Hallo</p>
<p>Hallo</p>
<p>Hallo</p>
<p>Hallo</p>
</div>
<div Klasse="div2 div"></div>
<div Klasse="div3 div"></div>
<div class="returnTop hide" onclick="returnTop();">Zurück zum Anfang</div>
</body>
</html>
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
<Stil>
*{
Rand: 0;
Polsterung: 0;
}
.div1{
Höhe: 100px;
Breite: 100px;
Hintergrundfarbe: rot;
}
.div3{
Höhe: 120px;
Breite: 120px;
Hintergrundfarbe: seegrün;
}
.div2{
Position: relativ;
}
.div4{
Hintergrundfarbe: Aquamarin;
Breite: 150px;
Höhe: 150px;
Polsterung: 5px;
Rand: 6px;
Rand: 4px durchgehend grün;
}
.div5{
Breite: 50%;
Höhe: 200px;
Überlauf: automatisch;
}
.div6{
Breite: 100 %;
Höhe: 1000px;
}
.div5{
Hintergrundfarbe: Aquamarin;
}
.div6{
Hintergrundfarbe: Schokolade;
}
.div7{
Breite: 90px;
Höhe: 60px;
Position: fest;
rechts: 20px;
unten: 20px;
Hintergrundfarbe: gelb;
Textausrichtung: zentriert;
/*Text horizontal zentrieren*/
Zeilenhöhe: 60px;
/*Textzeilenhöhe*/
}
.verstecken{
Anzeige: keine;
}
</Stil>
</Kopf>
<Text>
<!-- <div class="div1"></div>-->
<!-- <div class="div2">-->
<!-- <div class="div3"></div>-->
<!-- </div>-->
<!-- <div class="div4"></div>-->
<!-- <script src="jquery-3.3.1.js"></script>-->
<!-- <Skript>-->
<!-- // Den Versatz vom Ansichtsfenster berechnen -->
<!-- console.log($('.div1').offset().left); // 0-->
<!-- console.log($('.div1').offset().top); // 0-->
<!-- console.log($('.div3').offset().left); // 0-->
<!-- console.log($('.div3').offset().top); // 100-->
<!-- // Berechnen Sie den Offset vom positionierten übergeordneten Tag (beachten Sie, dass es bereits positioniert ist)-->
<!-- console.log($('.div3').position().left); // 0-->
<!-- console.log($('.div3').position().top); // 0-->
<!-- // Etikettengröße berechnen-->
<!-- console.log($('.div4').height()); // 150(Breite: 150px)-->
<!-- // console.log($('.div4').height('200px')) // Höhe wird 200px-->
<!-- console.log($('.div4').innerHeight()); // 160(Breite: 150px+Polsterung: 5px+Polsterung: 5px)-->
<!-- console.log($('.div4').outerHeight()); // 168(Breite: 150px+Polsterung: 5px+Polsterung: 5px+Rand: 4px+Rand: 4px)-->
<!-- console.log($('.div4').outerHeight(true)); // 180(Breite: 150px+Polsterung: 5px+Polsterung: 5px+Rand: 4px+Rand: 4px+Rand: 6px+Rand: 6px)-->
<!-- </script>-->
<!--Bildlaufleiste überwachen und zur obersten Instanz zurückkehren-->
<div Klasse="div5">
<h1>Hallo</h1>
<h1>Hallo</h1>
<h1>Hallo</h1>
<h1>Hallo</h1>
<h1>Hallo</h1>
<h1>Hallo</h1>
<h1>Hallo</h1>
<h1>Hallo</h1>
<h1>Hallo</h1>
<h1>Hallo</h1>
</div>
<div Klasse="div6">
<button onclick="returnTop1()">Zurück</button>
</div>
<div class="div7 hide" onclick="returnTop()">Zurück zum Anfang</div>
<script src="jquery-3.3.1.js"></script>
<Skript>
fenster.onscroll = funktion () {
// Das Onscroll-Ereignis wird ausgelöst, wenn die Bildlaufleiste des Elements gescrollt wird (Ereignis des Fensterobjekts)
let num=$(window).scrollTop(); // Die linken und rechten Bildlaufleisten sind scrollLeft
// Die Methode scrollTop() gibt die vertikale Position der Bildlaufleiste der übereinstimmenden Elemente zurück oder legt sie fest (jquery)
konsole.log(num);
wenn (Zahl>100) {
$('.div7').removeClass('ausblenden');
}anders{
$('.div7').addClass('ausblenden');
};
};
Funktion returnTop() {
$(window).scrollTop(0);
};
Funktion returnTop1() {
$('.div5').scrollTop(0);
};
</Skript>
</body>
</html>Instanzerweiterung: CSS:
.zurückNachOben {
Anzeige: keine;
Breite: 18px;
Zeilenhöhe: 1,2;
Polsterung: 5px 0;
Hintergrundfarbe: #000;
Farbe: #fff;
Schriftgröße: 12px;
Textausrichtung: zentriert;
Position: fest;
_position: absolut;
rechts: 10px;
unten: 100px;
_bottom: "auto";
Cursor: Zeiger;
Deckkraft: .6;
Filter: Alpha (Deckkraft = 60);
}jQuery-Code
(Funktion() {
var $backToTopTxt = "Zurück zum Anfang", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body"))
.text($backToTopTxt).attr("Titel", $backToTopTxt).click(function() {
$("html, body").animate({ scrollTop: 0 }, 120);
}), $backToTopFun = Funktion() {
var st = $(document).scrollTop(), winh = $(window).height();
(st > 0)? $backToTopEle.show(): $backToTopEle.hide();
//Speicherort unter IE6 if (!window.XMLHttpRequest) {
$backToTopEle.css("oben", st + winh - 166);
}
};
$(window).bind("scroll", $backToTopFun);
$(function() { $backToTopFun(); }); })();:
Dies ist das Ende dieses Artikels über die Verwendung von jQuery und CSS zur Implementierung der Funktion „Zurück zum Anfang“. Weitere Informationen zu jQuery- und CSS-Operationen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
>>: Konfigurationsschema für die MySQL-Master-Slave-Synchronisierung unter dem Centos7-System
Artikel empfehlen
Das Laufschrift-Tag in HTML erzielt einen nahtlosen Laufschrift-Effekt
Das <marquee>-Tag ist ein Tag, das paarweis...
Das Festlegen der Z-Index-Eigenschaft für die Flash-Overlay-Popup-Ebene im Webdesign funktioniert nicht
Standardmäßig wird Flash immer auf der obersten Eb...
Eine detaillierte Analyse des Mordes, der durch ein falsch platziertes Anführungszeichen in MySQL verursacht wurde
1. Einleitung In letzter Zeit erlebe ich es oft, ...
So weisen Sie Feldern bei der MySQL-Abfrage Standardwerte zu
brauchen Wenn Sie ein Feld abfragen, müssen Sie e...
Zusammenfassung von 10 erweiterten Tipps für Vue Router
Vorwort Vue Router ist der offizielle Routing-Man...
So erkennen Sie die Dateisystemintegrität basierend auf AIDE in Linux
1. HILFE AIDE (Advanced Intrusion Detection Envir...
Grafisches Tutorial zur Installation und Konfiguration von CentOS 6.4 MySQL 5.7.18
Die spezifischen Schritte zur Installation von my...
Beispiel für die Verwendung von JS zur nativen Implementierung des Jahreskarussell-Auswahleffekts
Vorwort Verwenden Sie js, um einen Jahresrotation...
Problem mit Zeitzonenfehler im Docker-Container
Inhaltsverzeichnis Hintergrund Frage Problemanaly...
Detaillierte Schritte zur Installation und Konfiguration von MySQL 8.0 auf CentOS 7.4 64-Bit
Schritt 1: Holen Sie sich die MySQL YUM-Quelle Ge...
MySQL Serie 3 Grundlagen
Inhaltsverzeichnis Tutorial-Reihe 1. Einführung i...
Von VirtualBox erstellte virtuelle Debian-Maschine teilt Dateien mit dem Windows-Host
der Begriff: 1. VM: Virtuelle Maschine Schritt: 1...
Gruselige Halloween-Linux-Befehle
Auch wenn nicht Halloween ist, lohnt es sich, sic...
Webdesign-Tipps für Formular-Eingabefelder
Dieser Artikel listet einige Tipps und Codes zu F...
Einführung in den Befehl „Linux-Typversion-Speicherfestplattenabfrage“
1. Lassen Sie uns zunächst eine allgemeine Einfüh...