So verwenden Sie jQuery, um die Seite wieder an den Anfang zu bringen (Code angehängt)

Ist Ihnen beim Durchsuchen der Website aufgefallen, dass eine Schaltfläche „Zurück zum Anfang“ angezeigt wird? Wissen Sie, wie Sie zum Anfang der HTML-Seite zurückkehren? In diesem Artikel wird der jQuery-Code mitgeteilt, der die einfachste HTML-Seite an die Spitze zurückgibt. Interessierte Freunde können darauf verweisen.

Um den Effekt zu erzielen, dass die Seite wieder an den Anfang zurückkehrt, sind umfangreiche JavaScript-Kenntnisse erforderlich, z. B. Funktion (), animieren, ausblenden usw. Wenn Sie sich nicht sicher sind, können Sie sich auf die entsprechenden Artikel beziehen Besuchen Sie die chinesische PHP-Website oder besuchen Sie das JavaScript-Video-Tutorial.

Beispielbeschreibung: Der Benutzer gleitet auf der Seite nach unten. Wenn der Abstand zwischen der Bildlaufleiste und dem oberen Rand größer als 100 Pixel ist, wird FadeIn verwendet, um die Zurück-Schaltfläche anzuzeigen , die Schaltfläche verschwindet. Der spezifische Code lautet wie folgt:

HTML-Teil:

<div id="wrapper">
     <div class="cont1"></div>
     <div class="cont2"></div>
     <div class="cont3"></div>
     <div class="cont4"></div>
     <a href="javascript:void(0)" id="toTop" style="display: block;"> 
     </a>
</div>

CSS-Teil:

*{margin: 0;padding: 0;}
            #wrapper{margin: 0 auto;width: 500px;}
            .cont1{height: 500px;background-color: wheat;}
            .cont2{height: 500px;background-color: honeydew;}
            .cont3{height: 500px;background-color: blueviolet;}
            .cont4{height: 500px;background-color: pink;}
            #toTop {display: none;text-decoration: none;position: fixed;bottom: 20px;right: 20px;overflow: hidden;width: 50px;height: 50px;background: url(img/icon_top.png) no-repeat center center;}

JavaScript-Teil:

Hinweis: Da es mit jQuery geschrieben wurde, denken Sie daran, die jQuery-Datei zu importieren

$(function(){
         //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
         $(function () {
             $(window).scroll(function(){
                 if ($(window).scrollTop()>100){
                     $("#toTop").fadeIn(1000);
                 }
                 else
                 {
                     $("#toTop").fadeOut(1000);
                 }
             });
             //当点击跳转链接后，回到页面顶部位置
             $("#toTop").click(function(){
                 $('body,html').animate({scrollTop:0},1000);
                 return false;
             });
         });
    });

Rendering:

Oben haben wir Ihnen erklärt, wie es geht Verwenden Sie jQuery, um den Code so zu implementieren, dass er zum Anfang der HTML-Seite zurückkehrt. Ja, Anfänger können es selbst ausprobieren und sehen, ob Ihr Code den Effekt erzielen kann, zum Anfang zurückzukehren wird dir weiterhelfen!

[Verwandte Tutorial-Empfehlungen]

1. jQuery-Referenzhandbuch für Chinesisch
2 >Bootstrap-Tutorial
Wenn Sie den Back-to-Top-Effektcode herunterladen möchten, können Sie die Spalte Back-to-Top-Code

besuchen!

Das obige ist der detaillierte Inhalt vonSo verwenden Sie jQuery, um die Seite wieder an den Anfang zu bringen (Code angehängt). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!