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: