So fügen Sie in WordPress mit jQuery einen Smooth Scroll to Top-Effekt hinzu

Veröffentlicht: 2022-08-12

Möchten Sie Ihrer WordPress-Website einen sanften Bildlauf zum Seitenanfang hinzufügen?

Ein Scroll-to-Top-Effekt ist großartig, wenn Sie eine lange Seite haben und Ihren Benutzern eine einfache Möglichkeit bieten möchten, zurück zum Anfang zu gelangen. Es hilft, die Benutzererfahrung Ihrer Website zu verbessern.

In diesem Artikel zeigen wir Ihnen, wie Sie mit jQuery und einem Plugin einen reibungslosen Scroll-to-Top-Effekt in WordPress hinzufügen.

How to scroll to top effect using jQuery

Was ist Smooth Scroll und wann sollten Sie es verwenden?

Sofern die Website kein Sticky-Header-Menü hat, müssen Benutzer, die zum Ende einer langen WordPress-Seite oder eines Posts scrollen, manuell nach oben wischen oder scrollen, um auf der Website zu navigieren.

Das kann ein echtes Ärgernis sein, und oft drücken Benutzer einfach die Zurück-Taste und gehen. Aus diesem Grund benötigen Sie eine Schaltfläche, die Benutzer schnell an den Anfang der Seite schickt.

Sie können diese Funktionalität wie folgt als einfachen Textlink hinzufügen, ohne jQuery zu verwenden: 

<a href="#" title="Back to top">^Top</a>

Dadurch werden Benutzer nach oben geschickt, indem sie die gesamte Seite in Millisekunden nach oben scrollen. Es funktioniert, aber der Effekt kann erschütternd sein, wie wenn Sie auf eine Unebenheit auf der Straße stoßen.

Glattes Scrollen ist das Gegenteil davon. Es wird den Benutzer mit einem optisch ansprechenden Effekt zurück nach oben schieben. Die Verwendung solcher Elemente kann die Benutzererfahrung auf Ihrer Website drastisch verbessern.

Lassen Sie uns sehen, wie Sie mit einem WordPress-Plugin und jQuery einen reibungslosen Bildlauf zum Top-Effekt hinzufügen können.

So fügen Sie mit einem WordPress-Plugin einen reibungslosen Scroll-to-Top-Effekt hinzu

Diese Methode wird Anfängern empfohlen, da Sie einer WordPress-Website einen Scroll-to-Top-Effekt hinzufügen können, ohne eine einzige Codezeile zu berühren.

Als erstes müssen Sie das Plugin WPFront Scroll Top installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unsere Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung können Sie in Ihrem WordPress-Dashboard zu Einstellungen » Nach oben scrollen gehen. Hier können Sie das Plugin konfigurieren und den Smooth-Scroll-Effekt anpassen.

Zuerst müssen Sie auf das Kontrollkästchen „Aktiviert“ klicken, um die Schaltfläche „Nach oben scrollen“ auf Ihrer Website zu aktivieren. Als Nächstes sehen Sie Optionen zum Bearbeiten des Scroll-Offsets, der Schaltflächengröße, der Deckkraft, der Fade-Dauer, der Scroll-Dauer und mehr.

Edit WPfront scroll top settings

Wenn Sie nach unten scrollen, finden Sie weitere Optionen wie das Bearbeiten der Zeit zum automatischen Ausblenden, das Aktivieren der Option zum Ausblenden der Schaltfläche auf kleinen Geräten und das Ausblenden auf dem wp-admin-Bildschirm.

Sie können auch bearbeiten, was die Schaltfläche bewirkt, wenn Sie darauf klicken. Standardmäßig scrollt es zum Anfang der Seite, aber Sie können es ändern, um zu einem bestimmten Element im Beitrag zu scrollen oder sogar auf eine Seite zu verlinken.

Es gibt auch eine Option, um die Position der Schaltfläche zu ändern. Es wird standardmäßig in der unteren rechten Ecke des Bildschirms angezeigt, aber Sie können es auch in eine der anderen Ecken verschieben.

More edit WPfront scroll top settings

Das Plugin WPFront Scroll Top bietet auch Filter, um die Scroll-to-Top-Schaltfläche nur auf ausgewählten Seiten anzuzeigen.

Normalerweise erscheint es auf allen Seiten Ihres WordPress-Blogs. Sie können jedoch zum Abschnitt „Auf Seiten anzeigen“ navigieren und auswählen, wo Sie den Effekt „Nach oben scrollen“ anzeigen möchten.

Choose where to display the effect

Das Plugin bietet auch vorgefertigte Schaltflächendesigns, aus denen Sie auswählen können. Sie sollten in der Lage sein, leicht ein Design zu finden, das zu Ihrer Website passt.

Wenn Sie keine vorgefertigte Bildschaltfläche finden, die für Sie funktioniert, gibt es die Möglichkeit, ein benutzerdefiniertes Bild aus der WordPress-Medienbibliothek hochzuladen.

Choose an image button

Wenn Sie fertig sind, klicken Sie einfach auf die Schaltfläche „Änderungen speichern“.

Sie können jetzt Ihre Website besuchen, um die Scroll-to-Top-Schaltfläche in Aktion zu sehen.

Scroll to top button preview

Hinzufügen von Smooth Scroll to Top-Effekt mit jQuery in WordPress

Diese Methode wird Anfängern nicht empfohlen. Es ist für Leute geeignet, die sich mit der Bearbeitung von Themen auskennen, da es das Hinzufügen von Code zu Ihrer Website beinhaltet.

Wir werden jQuery, etwas CSS und eine einzelne Zeile HTML-Code in Ihrem WordPress-Design verwenden, um den glatten Scroll-Top-Effekt hinzuzufügen.

Öffnen Sie zunächst einen Texteditor wie Notepad und erstellen Sie eine Datei. Fahren Sie fort und speichern Sie es als smoothscroll.js .

Als nächstes müssen Sie diesen Code kopieren und in die Datei einfügen: 

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;
		});
});

Danach können Sie die Datei speichern und in den Ordner /js/ in Ihrem WordPress-Theme-Verzeichnis hochladen. Weitere Einzelheiten finden Sie in unserer Anleitung zur Verwendung von FTP zum Hochladen von Dateien in WordPress.

Wenn Ihr Design kein /js/ hat, können Sie eines erstellen und smoothscroll.js hochladen. Weitere Informationen finden Sie auch in unserem Leitfaden zu den WordPress-Dateien und der Verzeichnisstruktur.

Dieser Code ist das jQuery-Skript, das einer Schaltfläche, die Benutzer zum Anfang der Seite führt, einen glatten Bildlaufeffekt hinzufügt.

Als nächstes müssen Sie die Datei smoothscroll.js in Ihr Design laden. Dazu werden wir das Skript in WordPress einreihen.

Kopieren Sie danach einfach diesen Code und fügen Sie ihn in die Datei functions.php Ihres Themes ein. Wir empfehlen, die Designdateien nicht direkt zu bearbeiten, da der kleinste Fehler Ihre Website beschädigen kann. Stattdessen können Sie ein Plugin wie WPCode verwenden und unserem Tutorial folgen, wie Sie benutzerdefinierte Code-Snippets in WordPress hinzufügen. 

wp_enqueue_script( 'smoothup', get_template_directory_uri() . 'https://cdn2.wpbeginner.com/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, fügen wir einen tatsächlichen Link zu unserer WordPress-Site hinzu, der die Benutzer zurück nach oben führt. Fügen Sie diesen HTML-Code einfach irgendwo in die footer.php -Datei Ihres Themes ein. Wenn Sie Hilfe benötigen, lesen Sie bitte unser Tutorial zum Hinzufügen von Kopf- und Fußzeilencode in WordPress. 

<a href="#top" id="smoothup" title="Back to top"></a>

Sie haben vielleicht bemerkt, dass der HTML-Code einen Link, aber keinen Ankertext enthält. 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 40 x 40 Pixel großes Symbol. Fügen Sie einfach das benutzerdefinierte CSS unten zum Stylesheet Ihres Designs hinzu.

In diesem Code verwenden wir ein Bildsymbol als Hintergrundbild der Schaltfläche und setzen es an einer festen Position. Wir haben auch eine kleine CSS-Animation hinzugefügt, die die Schaltfläche dreht, wenn ein Benutzer mit der Maus darüber fährt. 

#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;
}

Stellen Sie im obigen CSS sicher, dass Sie https://www.example.com/wp-content/uploads/2013/07/top_icon.png durch die Bild-URL ersetzen, die Sie verwenden möchten. Sie können Ihr eigenes Bildsymbol mit dem WordPress-Medien-Uploader hochladen, die Bild-URL kopieren und sie dann in den Code einfügen.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, Ihrer Website mithilfe von jQuery einen reibungslosen Scroll-to-Top-Effekt hinzuzufügen. Vielleicht möchten Sie auch unsere Expertenauswahl der besten WordPress-Plugins für kleine Unternehmen und unsere Schritt-für-Schritt-Anleitung zum Starten eines Online-Shops sehen.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.