So fügen Sie in WordPress mit jQuery einen glatten Bildlauf nach oben hinzu

Haben Sie Websites gesehen, die einen glatten Bildlauf zum Seiteneffekt hinzufügen? Dies ist großartig, wenn Sie eine lange Seite haben und den Benutzern eine einfache Möglichkeit bieten möchten, wieder nach oben zu gelangen. Kürzlich hat uns einer unserer Leser gefragt, ob Sie in WordPress einen glatten Bildlauf nach oben einfügen möchten. In diesem Artikel zeigen wir Ihnen, wie Sie mit jQuery in WordPress einen sanften Bildlauf nach oben einfügen.

Hinweis: Dieses Lernprogramm wurde für fortgeschrittene Heimwerker erstellt, die ihre Themes bequem bearbeiten können. Wenn Sie eine Plugin-Methode verwenden möchten, verwenden Sie bitte glatte Seiten zum oberen Plugin. Für diejenigen, die lernen möchten, wie dies ohne Plugin geht, lesen Sie bitte weiter.

Was ist Smooth Scroll und wann wird es verwendet??

Wenn eine Seite oder ein Beitrag viele Inhalte enthält, müssen Benutzer nach unten scrollen, um diese Inhalte zu lesen. Wenn die Benutzer nach unten scrollen, werden alle Navigationslinks nach oben verschoben. Wenn Sie mit dem Lesen dieses Artikels fertig sind, müssen Sie nach oben scrollen, um zu sehen, was auf Ihrer Website sonst noch zu tun ist. Mit der Taste "Nach oben scrollen" werden Benutzer schnell an den Anfang der Seite geleitet. Sie können dies als Textlink hinzufügen, ohne jQuery wie folgt zu verwenden:

 ^ Oben 

Benutzer werden nur an den Anfang der Seite gesendet und in Millisekunden nach oben durchlaufen. Es ist funktional, aber irgendwie wie eine Beule auf der Straße. Das glatte Scrollen ist dem entgegengesetzt. Dadurch wird der Benutzer problemlos an den Seitenanfang verschoben. Dies erzeugt einen schönen Effekt und verbessert die Benutzererfahrung.

Hinzufügen eines glatten Bildlaufs zum oberen Effekt mit jQuery in WordPress

Um einen sanften Bildlauf nach oben zu erzielen, verwenden wir in Ihrem WordPress-Design jQuery, etwas CSS und eine einzige Zeile HTML-Code. Öffnen Sie zunächst einen Texteditor wie den Editor. Erstellen Sie eine Datei und speichern Sie sie als smoothscroll.js. Kopieren Sie diesen Code und fügen Sie ihn in die Datei ein:

 jQuery (document) .ready (Funktion ($) $ (Fenster) .scroll (Funktion () if ($ (this) .scrollTop () < 200)  $('#smoothup') .fadeOut();  else  $('#smoothup') .fadeIn();  ); $('#smoothup').on('click', function() $('html, body').animate(scrollTop:0, 'fast'); return false; ); ); 

Speichern Sie die Datei und laden Sie sie in Ihr WordPress-Designverzeichnis hoch / js / Ordner (siehe Verwenden von FTP zum Hochladen von Dateien in WordPress). Wenn Ihr Theme keine / js / erstellen Sie ein Verzeichnis und laden Sie es hoch smoothscroll.js dazu Dieser Code ist das jQuery-Skript, das einer Schaltfläche, die Benutzer an den Anfang der Seite bringt, einen reibungslosen Bildlaufeffekt hinzufügt.

Als nächstes müssen Sie das hinzufügen smoothscroll.js zu deinem Thema. Um dies zu tun, werden wir das Skript in WordPress aufnehmen (weitere Informationen finden Sie in unserem Handbuch zum richtigen Hinzufügen von Skripts in WordPress). Kopieren Sie diesen Code und fügen Sie ihn in Ihr Theme ein Functions.php Datei.

 wp_enqueue_script ('smoothup', get_template_directory_uri (). '/js/smoothscroll.js', array ('jquery'), ", true); 

Im obigen Code haben wir WordPress angewiesen, unser Skript und auch die jQuery-Bibliothek zu laden, da unser Plugin davon abhängt. Nun, da wir den jQuery-Teil hinzugefügt haben, können wir unserer WordPress-Site einen Link hinzufügen, der die Benutzer zurück zum Anfang führt. Fügen Sie dieses HTML an einer beliebigen Stelle in Ihrem Thema ein footer.php Datei.

Wie Sie bemerkt haben, haben wir einen Link hinzugefügt, aber keinen Text verlinkt. Das liegt daran, dass wir ein Bildsymbol mit Aufwärtspfeil verwenden, um eine Schaltfläche "Zurück zum Anfang" anzuzeigen. In diesem Beispiel verwenden wir ein 40x40px-Symbol. Fügen Sie dies dem Stylesheet Ihres Themes hinzu.

 #smoothup height: 40px; Breite: 40px; Position: feststehend; unten: 50px; rechts: 100px; Text-Gedankenstrich: -9999px; Anzeige: keine; Hintergrund: URL ("http://www.example.com/wp-content/uploads/2013/07/top_icon.png"); -webkit-Übergangsdauer: 0,4 s; -Moz-Übergangsdauer: 0,4 s; Übergangszeit: 0,4 s;  #smoothup: hover -webkit-transform: rotate (360deg) Hintergrund: URL (") no-repeat; 

Im obigen CSS haben wir eine feste Position für unser Bildsymbol und ein Bildsymbol als Hintergrundbild verwendet. Sie können Ihr Bildsymbol mit dem WordPress-Medien-Uploader hochladen und dann die Bild-URL als Hintergrund-URL einfügen. Wir haben auch eine kleine CSS-Animation zu der Schaltfläche hinzugefügt, die die Schaltfläche dreht, wenn ein Benutzer mit der Maus darüber fährt.

Mit dem Effekt "Bildlauf nach oben" können Benutzer nach oben navigieren und andere Aktivitäten auf Ihrer Website finden. Sie können auch eine schwebende Fußzeile wie auf unserer Website hinzufügen, um hervorgehobene Inhalte anzuzeigen. Wenn Sie nicht möchten, dass Ihre Benutzer nach oben scrollen, um Ihren Artikel zu teilen, empfehlen wir Ihnen dringend, das Floating-Plug-In für die Social Share-Leiste wie in WPBeginner zu verwenden.

Wir hoffen, dass dieser Artikel dazu beigetragen hat, dass Sie mit jQuery einen sanften Bildlauf auf Ihrer Website hinzufügen. Um andere coole Anwendungen von jQuery in WordPress zu sehen, können Sie unseren jQuery-FAQ-Akkordeonartikel oder den Artikel zum Faulenzen von Bildern betrachten.

Halten Sie den Effekt "Bildlauf nach oben" für sinnvoll? Lassen Sie uns wissen, indem Sie unten einen Kommentar hinterlassen.