Haben Sie Websites gesehen, die einen reibungslosen Scroll-Effekt zum Seitenanfang hinzufügen? Dies ist großartig, wenn Sie eine lange Seite haben und Ihren Benutzern eine einfache Möglichkeit bieten möchten, wieder nach oben zu gelangen. Kürzlich hat uns einer unserer Leser gefragt, ob wir in WordPress einen reibungslosen Bildlauf hinzufügen möchten. In diesem Artikel zeigen wir Ihnen, wie Sie in WordPress mit jQuery einen reibungslosen Bildlauf zum Top-Effekt hinzufügen.
Hinweis: Dieses Tutorial wurde für fortgeschrittene Heimwerker erstellt, die gerne ihre Themen bearbeiten. Wenn Sie eine Plugin-Methode verwenden möchten, verwenden Sie bitte reibungsloses Scrollen nach oben 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 Benutzer nach unten scrollen, werden alle Ihre Navigationslinks nach oben verschoben. Wenn Benutzer mit dem Lesen dieses Artikels fertig sind, müssen sie nach oben scrollen, um zu sehen, was auf Ihrer Website noch zu tun ist. Mit der Schaltfläche „Nach oben scrollen“ gelangen Benutzer schnell zum Anfang der Seite. Sie können dies als Textlink hinzufügen, ohne jQuery zu verwenden, wie folgt:
<a href="#" title="Back to top">^Top</a>
Es schickt Benutzer einfach an den Anfang der Seite und scrollt die gesamte Seite in Millisekunden nach oben. Es ist funktional, aber irgendwie wie eine Beule auf der Straße. Glattes Scrollen ist das Gegenteil davon. Es gleitet den Benutzer sanft zurück zum Anfang der Seite. Dies erzeugt einen schönen Effekt und verbessert die Benutzererfahrung.
Hinzufügen von Smooth Scroll zum Top-Effekt mit jQuery in WordPress
Um einen reibungslosen Scroll-Effekt zu erzielen, verwenden wir jQuery, etwas CSS und eine einzige Zeile HTML-Code in Ihrem WordPress-Theme. Öffnen Sie zunächst einen Texteditor wie Notepad. Erstellen Sie eine Datei und speichern Sie sie unter smoothscroll.js
. Kopieren Sie diesen Code und fügen Sie ihn in die Datei ein:
jQuery(document).ready(function($){ $(window).scroll(function(){ 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-Theme-Verzeichnis hoch /js/
Ordner (siehe So verwenden Sie FTP zum Hochladen von Dateien in WordPress). Wenn Ihr Thema kein a . hat /js/
Verzeichnis, dann erstellen Sie eines und laden Sie es hoch smoothscroll.js
dazu. Bei diesem Code handelt es sich um das jQuery-Skript, das einen reibungslosen Bildlaufeffekt zu einer Schaltfläche hinzufügt, die Benutzer zum Anfang der Seite führt.
Als nächstes müssen Sie die hinzufügen smoothscroll.js
zu deinem Thema. Um dies gut zu tun, werden wir das Skript in WordPress einreihen (erfahren Sie mehr in unserer Anleitung zum richtigen Hinzufügen von Skripten in WordPress). Kopiere diesen Code und füge ihn in dein 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 zu laden und auch die jQuery-Bibliothek zu laden, da unser Plugin davon abhängt. Nachdem wir nun den jQuery-Teil hinzugefügt haben, können wir einen tatsächlichen Link zu unserer WordPress-Site hinzufügen, der die Benutzer zurück nach oben führt. Fügen Sie diesen HTML-Code an einer beliebigen Stelle in Ihrem Theme ein footer.php
Datei.
<a href="#top" id="smoothup" title="Back to top"></a>
Wie Sie bemerkt haben, haben wir einen Link hinzugefügt, ihn jedoch nicht mit einem Text verknüpft. Das liegt daran, dass wir ein Bildsymbol mit einem Aufwärtspfeil verwenden, um eine Zurück-nach-oben-Schaltfläche anzuzeigen. In diesem Beispiel verwenden wir ein 40x40px-Symbol. Fügen Sie dies dem Stylesheet Ihres Themes hinzu.
#smoothup { height: 40px; width: 40px; position:fixed; bottom:50px; right:100px; text-indent:-9999px; display:none; background: url("http://www.example.com/wp-content/uploads/2013/07/top_icon.png"); -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; transition-duration: 0.4s; } #smoothup:hover { -webkit-transform: rotate(360deg) } background: url('') no-repeat; }
Im obigen CSS haben wir eine feste Position für unser Bildsymbol verwendet und ein Bildsymbol als Hintergrundbild verwendet. Sie können Ihr Bildsymbol mit dem WordPress-Medien-Uploader hochladen und dann die Bild-URL abrufen, um sie als Hintergrund-URL einzufügen. Wir haben der Schaltfläche auch eine kleine CSS-Animation hinzugefügt, die die Schaltfläche dreht, wenn ein Benutzer mit der Maus darüber fährt.
Mit dem Effekt „Scrollen nach oben“ können Benutzer nach oben zurückkehren und andere Aktivitäten auf Ihrer Website finden. Sie können auch eine schwebende Fußzeile hinzufügen, wie wir sie auf unserer Website haben, um vorgestellte Inhalte anzuzeigen. Wenn Sie nicht möchten, dass Ihre Benutzer nach oben scrollen, um Ihren Artikel zu teilen, empfehlen wir Ihnen dringend, das Floating-Social-Share-Bar-Plugin zu verwenden, wie wir es bei Themelocal haben.
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, mithilfe von jQuery einen reibungslosen Scroll-Effekt zum Seitenanfang auf Ihrer Website hinzuzufügen. Um einige andere coole Anwendungen von jQuery in WordPress zu sehen, können Sie sich unseren jQuery FAQ-Akkordeon-Artikel oder den Artikel zum Lazy Loading von Bildern ansehen.
Denken Sie, dass Scroll-to-Top-Effekt nützlich ist? Lassen Sie es uns wissen, indem Sie unten einen Kommentar hinterlassen.