Haben Sie Websites gesehen, die einen reibungslosen Bildlauf oben auf der Seite ermöglichen? Dies ist ideal, wenn Sie eine lange Seite haben und Ihren Benutzern eine einfache Möglichkeit bieten möchten, zum Anfang zurückzukehren. Kürzlich hat uns einer unserer Leser gefragt, ob wir dem Top-Effekt in WordPress ein reibungsloses Scrollen hinzufügen möchten. In diesem Artikel zeigen wir Ihnen, wie Sie mit jQuery in WordPress einen reibungslosen Bildlauf zum Top-Effekt hinzufügen.
Hinweis: Dieses Tutorial wurde für einen Heimwerker erstellt, der seine Themen bequem bearbeiten kann. Wenn Sie eine Plugin-Methode verwenden möchten, scrollen Sie mit der weichen Seite zum obersten Plugin. Für diejenigen, die lernen möchten, wie man dies ohne Plugin macht, lesen Sie weiter.
Was ist reibungsloses Scrollen und wann wird es verwendet?
Wenn eine Seite oder ein Beitrag viel Inhalt enthält, müssen Benutzer nach unten scrollen, um diesen Inhalt zu lesen. Wenn Benutzer nach unten scrollen, werden alle Navigationslinks nach oben verschoben. Wenn Benutzer diesen Artikel gelesen haben, sollten sie nach oben scrollen, um zu sehen, was auf ihrer Website noch zu tun ist. Wenn Sie zum oberen Rand scrollen, gelangen Benutzer schnell zum oberen Rand der Seite. Sie können dies wie folgt als Textlink hinzufügen, ohne jQuery zu verwenden:
^Top
Es sendet Benutzer einfach an den Anfang der Seite und scrollt die gesamte Seite in Millisekunden. Es ist funktional, aber es ist wie ein Hit auf der Straße. Reibungsloses Scrollen ist das Gegenteil davon. Wischen Sie den Benutzer vorsichtig an den Anfang der Seite. Dies erzeugt einen schönen Effekt und verbessert die Benutzererfahrung.
Fügen Sie mit jQuery in WordPress einen reibungslosen Bildlauf zum Top-Effekt hinzu
Um dem Top-Effekt einen reibungslosen Bildlauf hinzuzufügen, verwenden wir jQuery, etwas CSS und eine einzelne Zeile HTML-Code in Ihrem WordPress-Design. Öffnen Sie zuerst einen Texteditor wie Notepad. Erstellen Sie eine Datei und speichern Sie sie als glattscroll.js. Kopieren Sie diesen Code und fügen Sie ihn in die Datei ein:
jQuery(document).ready(function($){
$(window).scroll(function(){
if ($(this).scrollTop()
Guarde el archivo y cárguelo en la carpeta / js / de su directorio de temas de WordPress (consulte Cómo usar FTP para cargar archivos en WordPress). Si su tema no tiene un directorio / js /, cree uno y cargue smoothscroll.js en él. Este código es el script jQuery que agregará un efecto de desplazamiento suave a un botón que lleva a los usuarios a la parte superior de la página.
Lo siguiente que debe hacer es agregar smoothscroll.js a su tema. Para hacerlo bien, colocaremos el script en WordPress (obtenga más información en nuestra guía sobre cómo agregar correctamente los scripts en WordPress). Copie y pegue este código en el archivo functions.php de su tema.
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. Nachdem wir den jQuery-Teil hinzugefügt haben, fügen wir einen echten Link zu unserer WordPress-Site hinzu, der die Benutzer wieder nach oben bringt. Fügen Sie diesen HTML-Code an einer beliebigen Stelle in die Datei footer.php Ihres Themas ein.
Wie Sie bemerkt haben, haben wir einen Link hinzugefügt, aber wir haben ihn mit keinem Text verknüpft. Dies liegt daran, dass wir ein Bildsymbol mit einem Aufwärtspfeil verwenden, um eine Schaltfläche "Zurück nach oben" anzuzeigen. In diesem Beispiel verwenden wir ein 40x40px-Symbol. Fügen Sie dies dem Stylesheet Ihres Themas hinzu.
#smoothup {
height: 40px;
width: 40px;
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
display:none;
background: url("https://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 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 der Schaltfläche auch eine kleine CSS-Animation hinzugefügt, die die Schaltfläche dreht, wenn ein Benutzer darüber fährt.
Wenn Sie zum Top-Effekt scrollen, können Benutzer zum Anfang zurückkehren und andere Aufgaben auf Ihrer Website finden. Sie können auch eine schwebende Fußzeile hinzufügen, wie wir sie auf unserer Website haben, um vorgestellten Inhalt anzuzeigen. Wenn Sie nicht möchten, dass Ihre Benutzer nach oben scrollen, um Ihren Artikel zu teilen, empfehlen wir dringend, dass Sie das schwebende Plugin in der Social-Sharing-Leiste verwenden, wie wir es in WPBeginner getan haben.
Wir hoffen, dieser Artikel hat Ihnen dabei geholfen, mit jQuery einen reibungslosen Bildlauf zum Seitenanfang Ihrer Website hinzuzufügen. Weitere nützliche Anwendungen von jQuery in WordPress finden Sie in unserem FAQ-Artikel zu jQuery-Akkordeons oder im Artikel zum verzögerten Laden von Bildern
Halten Sie es für nützlich, zum Top-Effekt zu scrollen? Lass es uns wissen, indem du unten einen Kommentar hinterlässt.
