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

Haben Sie jemals durch einen langen WordPress-Blogbeitrag oder eine Produktseite auf Ihrem Handy gescrollt und dann festgestellt, dass Sie ganz nach oben wischen mussten, nur um das Menü zu finden? Ihre Besucher könnten dasselbe empfinden.

Auf längeren Seiten kann diese kleine Unannehmlichkeit schnell zu Frustration führen. Und einige verlassen Ihre WordPress-Website möglicherweise einfach, anstatt zurück zu navigieren.

Ein sanfter Scroll-to-Top-Button kann Ihnen helfen, dies sofort zu beheben. Diese Funktion gibt den Lesern eine schnelle Möglichkeit, wieder nach oben zu springen, was sie engagiert halten und sie ermutigen kann, mehr von Ihrer Website zu erkunden.

In diesem Leitfaden zeigen wir Ihnen genau, wie Sie mit jQuery einen sanften Scroll-to-Top-Effekt in WordPress hinzufügen. Keine Sorge, es ist einfacher, als Sie denken! 💡

Was ist sanftes Scrollen und wann sollten Sie es verwenden?

Sanftes Scrollen ist ein Navigationseffekt, der die Seite in einer gleichmäßigen, flüssigen Bewegung nach oben oder unten bewegt, anstatt sofort zu einem Abschnitt zu springen.

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

Das kann sehr ärgerlich sein, und oft klicken Benutzer einfach auf den Zurück-Button und verlassen die Seite. Deshalb benötigen Sie eine Schaltfläche, um Benutzer schnell zum Anfang des Beitrags oder der Seite zu bringen.

Normalerweise können Sie diese Funktionalität als einfachen Textlink ohne jQuery hinzufügen, so:

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

Das schickt Benutzer durch Scrollen der gesamten Seite in Millisekunden nach oben. Es funktioniert, aber der Effekt kann störend sein, ähnlich wie wenn man über einen Schlagloch fährt.

Ein sanftes Scrollen ist das Gegenteil davon. Es lässt den Benutzer mit einem optisch ansprechenden Effekt wieder nach oben gleiten. Die Verwendung von Elementen wie diesem kann die Benutzererfahrung auf Ihrer Website drastisch verbessern.

In diesem Sinne werden wir zwei Methoden vorstellen, um einen sanften Scroll-to-Top-Effekt auf Ihrer WordPress-Website mit einem Plugin und jQuery hinzuzufügen. Hier ist eine kurze Übersicht über alle Dinge, die wir in dieser Anleitung behandeln werden:

Ohne weitere Umschweife beginnen wir mit der ersten Methode.

Tipp 1: Hinzufügen eines sanften Scroll-to-Top-Effekts mit einem WordPress-Plugin

Diese Methode wird für Anfänger empfohlen, da sie es Ihnen ermöglicht, einen Scroll-to-Top-Effekt zu einer WordPress-Website hinzuzufügen, ohne eine einzige Zeile Code anzufassen.

Das Erste, was Sie tun müssen, ist das Plugin WPFront Scroll Top zu installieren und zu aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unsere Anleitung zum Installieren eines WordPress-Plugins.

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

Von hier aus müssen Sie zuerst das Kontrollkästchen 'Aktiviert' aktivieren, um den Scroll-to-Top-Button auf Ihrer Website zu aktivieren. Als Nächstes sehen Sie Optionen zur Bearbeitung des Scroll-Offsets, der Button-Größe, der Deckkraft, der Fade-Dauer, der Scroll-Dauer und mehr.

Wenn Sie nach unten scrollen, finden Sie weitere Optionen, wie z. B. die Bearbeitung der automatischen Ausblendzeit und die Aktivierung der Option, die Schaltfläche auf kleinen Geräten oder dem wp-admin Bildschirm auszublenden.

Sie können auch bearbeiten, was die Schaltfläche tut, wenn Sie darauf klicken. Standardmäßig scrollt sie zum Anfang der Seite, aber Sie können sie so ändern, dass sie zu einem bestimmten Element im Beitrag scrollt oder sogar zu einer Seite verlinkt.

Zusätzlich können Sie die Position des Buttons anpassen. Während er normalerweise in der unteren rechten Ecke des Bildschirms erscheint, haben Sie die Möglichkeit, ihn in jede andere Ecke zu verschieben.

Das WPFront Scroll Top Plugin bietet Filter, um den Scroll-to-Top-Button nur auf ausgewählten Seiten anzuzeigen.

Normalerweise erscheint sie auf allen Seiten Ihres WordPress-Blogs.

Sie können jedoch zum Abschnitt „Auf Seiten anzeigen“ navigieren und auswählen, wo Sie den Effekt des Scrollens nach oben anzeigen möchten.

Das Plugin bietet auch vorgefertigte Button-Designs. Sie sollten problemlos ein Design finden, das zu Ihrer Website passt.

Wenn Sie kein vorgefertigtes Bild für die Schaltfläche finden, das für Sie funktioniert, gibt es die Option, ein benutzerdefiniertes Bild aus der WordPress- Mediathek hochzuladen.

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

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

Tipp 2: Hinzufügen eines sanften Scroll-to-Top-Effekts mit jQuery in WordPress

In dieser Methode fügen wir den sanften Scroll-to-Top-Effekt mit jQuery, etwas CSS und einer einzigen Zeile HTML-Code hinzu. Unser Team hat diesen genauen Code-Schnipsel auf einer frischen WordPress-Installation manuell getestet und verifiziert, um sicherzustellen, dass er funktioniert, ohne die Theme-Funktionalität zu beeinträchtigen.

Viele Tutorials werden Sie dazu anleiten, Ihre Theme-Dateien zu bearbeiten, um einen sanften Scroll-to-Top-Button hinzuzufügen. Aber das ist nicht sehr anfängerfreundlich – selbst ein winziger Fehler könnte Ihre Website beschädigen.

Deshalb empfehlen wir die Verwendung von WPCode, wenn Sie benutzerdefinierte Funktionalitäten wie einen sanften Scroll-Effekt hinzufügen möchten. Es ist das beste Code-Snippet-Plugin für WordPress und ermöglicht es Ihnen, benutzerdefinierte Snippets sicher hinzuzufügen – alles, ohne Ihre Theme-Dateien zu berühren.

Einige unserer Partner-Marken verwenden WPCode, um ihre benutzerdefinierten Code-Snippets hinzuzufügen und zu verwalten, und es funktioniert sehr gut.

Um mehr darüber zu erfahren, können Sie unsere vollständige WPCode-Bewertung lesen, um alle Funktionen zu sehen.

Zuerst müssen Sie das kostenlose WPCode-Plugin installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie unsere Anleitung zum Installieren eines WordPress-Plugins.

Gehen Sie nach der Aktivierung in Ihrem WordPress-Dashboard zu Code-Snippets » + Snippet hinzufügen.

Auf dem nächsten Bildschirm sehen Sie die WPCode-Codebibliothek.

Klicken Sie unter „Add Your Custom Code (Custom Snippet)“ auf „Use snippet“.

Ein Popup wird angezeigt, in dem Sie nach Ihrem Code-Typ gefragt werden.

Stellen Sie sicher, dass Sie „JavaScript Snippet“ auswählen.

Jetzt, da Sie sich im Code-Editor befinden, geben wir Ihrem benutzerdefinierten Code-Snippet zunächst einen klaren Namen. Dies dient nur Ihrer Referenz, aber wir empfehlen einen klaren, beschreibenden Namen.

Fügen Sie dann den folgenden Code in das Feld „Code-Vorschau“ 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;
		});
});

Dieses jQuery-Skript erledigt die Hauptarbeit für Ihren sanften Scroll-Effekt.

Zuerst wird der Button ausgeblendet, bis der Benutzer 200 Pixel nach unten scrollt. Wenn der Benutzer auf den Button klickt, animiert das Skript die Seite sanft zurück auf 0 Pixel (ganz nach oben).

Wir haben auch eine Zeile return false; eingefügt, um das Standardverhalten von HTML-Links zu verhindern, das den Benutzer sofort nach oben springen lassen und die Animation ruinieren würde.

So könnte es auf Ihrem Bildschirm aussehen:

Scrollen Sie als Nächstes nach unten zum Abschnitt 'Einfügen'.

Stellen Sie zunächst sicher, dass „Auto Insert“ ausgewählt ist. Dies stellt sicher, dass der Snippet automatisch auf Ihrer Website ausgeführt wird, ohne dass eine manuelle Platzierung erforderlich ist.

Überprüfen wir dann den Speicherort.

Es gibt viele Optionen zur Auswahl, darunter Header, Footer, Navigationsmenü und mehr. Für eine Scroll-to-Top-Schaltfläche ist „Site Wide Footer“ eine großartige Option, da sie sicherstellt, dass die Schaltfläche auf allen Seiten verfügbar ist, ohne die Inhalte Ihrer Website zu beeinträchtigen.

Wenn das erledigt ist, können Sie den Schalter auf „Active“ stellen, damit das Skript sofort auf Ihrer Website ausgeführt wird.

Und vergessen Sie danach nicht, auf die Schaltfläche „Snippet speichern“ zu klicken, um das Skript zu aktivieren.

Jetzt, da wir jQuery hinzugefügt haben, fügen wir einen tatsächlichen Link zu unserer WordPress-Website hinzu, der die Benutzer zurück nach oben bringt.

Fügen Sie dazu einfach dieses HTML mit WPCode in den Footer Ihrer Website ein.

Gehen Sie zu Code-Snippets » Header & Footer und fügen Sie diesen Snippet in den Bereich „Footer“ ein:

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

Vergessen Sie nicht, auf „Änderungen speichern“ zu klicken, wenn Sie fertig sind. Wenn Sie Hilfe benötigen, lesen Sie bitte unser Tutorial zum Hinzufügen von Header- und Footer-Code in WordPress

Wenn Sie Ihre Website jetzt aufrufen, sehen Sie keine Schaltfläche. Das liegt daran, dass unser HTML-Code einen Link enthält, aber keinen Ankertext. Er ist derzeit völlig unsichtbar.

Um dies zu beheben, verwenden wir ein Bildsymbol (wie einen Pfeil nach oben), um eine Schaltfläche zum Zurück nach oben anzuzeigen. Dazu müssen Sie ein benutzerdefiniertes CSS hinzufügen.

Sie können das CSS in der Stylesheet-Datei Ihres Themes oder über WPCode hinzufügen. Die Verwendung von WPCode ist sicherer, da es bei einem Theme-Update nicht verloren geht.

Bevor Sie den Code hinzufügen, müssen Sie Folgendes tun:

1. Laden Sie ein Bildsymbol (wie einen Pfeil) in Ihre WordPress-Mediathek hoch. Die Größe kann beliebig gewählt werden, je nachdem, was für Ihre Website am besten geeignet ist – wir haben als Beispiel 40x40px verwendet. Wenn Sie eine andere Größe verwenden, stellen Sie sicher, dass Sie die Werte für height und width im folgenden CSS-Code ändern.
2. Kopieren Sie die URL des gerade hochgeladenen Bildes. Ersetzen Sie dann die Dummy-Bild-URL (https://www.example.com/wp-content/uploads/2013/07/top_icon.png) im folgenden CSS-Snippet durch Ihre tatsächliche Bild-URL.

Dadurch wird sichergestellt, dass Ihr Scroll-to-Top-Button korrekt angezeigt wird und den Hover-Rotationseffekt hat.

Navigieren Sie nun zu Code-Snippets » + Snippet hinzufügen.

Fahren Sie dann mit der Maus über „Benutzerdefinierten Code hinzufügen (Benutzerdefiniertes Snippet)“.

Klicken Sie auf die Schaltfläche „Snippet verwenden“, sobald sie erscheint.

Im erscheinenden Popup müssen Sie einen Code-Typ auswählen.

Wählen wir 'CSS-Snippet'.

Geben Sie im Editor Ihrem benutzerdefinierten Code-Snippet einen aussagekräftigen Namen zur einfachen Organisation.

Fügen Sie dann den folgenden benutzerdefinierten CSS-Code in das Feld „Code-Vorschau“ ein:

<pre class="wp-block-syntaxhighlighter-code">#smoothup {
    height: 40px;
    width: 40px;
    position: fixed;
    bottom: 50px;
    right: 20px;
    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);
    transform: rotate(360deg);
}</pre>

Dieses CSS setzt eine feste Icon-Größe und -Position sowie eine kleine Hover-Animation, die den Button dreht.

Sie müssen nichts in „Einfügen“ bearbeiten. Dies stellt sicher, dass das CSS website-weit angewendet wird, ohne andere Elemente zu beeinträchtigen.

Schalten Sie schließlich den Schalter um, um das Snippet zu aktivieren, und klicken Sie auf „Änderungen speichern“.

Und das ist im Grunde alles!

Sie können nun Ihre Website besuchen, um Ihr reibungsloses Scroll-to-Top in Aktion zu sehen:

Bonustipp: Weitere subtile Animationseffekte, um Besucher zu fesseln

Ein reibungsloser Scroll-to-Top-Button ist nur eine Möglichkeit, Ihre Website benutzerfreundlicher zu gestalten. Es gibt viele andere kleine Animationseffekte, die Sie hinzufügen können, um die Aufmerksamkeit sanft zu lenken und das Surfen auf Ihrer Website mühelos zu gestalten.

Ein Parallax-Effekt lässt beispielsweise Hintergrundbilder sich mit einer anderen Geschwindigkeit als Ihr Inhalt bewegen, wodurch ein Gefühl von Tiefe und Bewegung entsteht. Moderne Seitenersteller wie SeedProd verfügen über diese Funktionalität, sodass Sie diesen Effekt ohne Code erstellen können.

Es ist eine einfache Möglichkeit, Ihre Seiten lebendiger zu gestalten. Schritt-für-Schritt-Anleitungen finden Sie in unserem Leitfaden zum Hinzufügen eines Parallax-Effekts.

Ein Such-Toggle-Effekt hält die Dinge sauber, indem die Suchleiste nur angezeigt wird, wenn jemand auf das Symbol klickt. Diese Funktion blendet das Such-Eingabefeld aus, bis ein Benutzer aktiv auf eine Schaltfläche klickt, um es anzuzeigen. Dies trägt dazu bei, dass Ihr Design weniger überladen wirkt und es für Besucher dennoch einfach ist, das zu finden, was sie brauchen.

Wenn Ihr Theme dies nicht bereits integriert hat, können Plugins wie WPCode helfen. Details finden Sie in unserem Leitfaden zum Hinzufügen eines Such-Toggle-Effekts in WordPress.

Und wenn Sie eine Bildergalerie haben, ermöglicht ein Lightbox-Effekt den Betrachtern, Fotos in einem größeren, ablenkungsfreien Pop-up anzuzeigen, ohne die Seite zu verlassen. Dieser Überlagerungseffekt zeigt Bilder in einem fokussierten Fenster an, während der Rest der Seite abgedunkelt wird. Es ist ein kleines Detail, aber es macht einen großen Unterschied für jeden, der Ihre Bilder gerne erkundet.

Außerdem machen Galerie-Plugins wie Envira Gallery das Hinzufügen dieser Funktion einfach. Dazu können Sie sich auf unseren Leitfaden zum Hinzufügen einer Galerie in WordPress mit Lightbox-Effekt beziehen.

Diese Details sind nicht nur "nett zu haben"; sie zeigen den Besuchern, dass Sie über ihre Erfahrung nachgedacht haben. Das kann sie eher dazu bringen, zu bleiben und weiter zu erkunden. 🕵️

FAQs: Hinzufügen eines Scroll-to-Top-Effekts in WordPress mit jQuery

Bevor wir zum Ende kommen, hier sind einige häufig gestellte Fragen von Lesern zum Hinzufügen eines Scroll-to-Top-Buttons in WordPress.

Ist eine Scroll-to-Top-Schaltfläche für jede Website notwendig?

Nicht immer. Aber es ist eine sinnvolle Ergänzung für Seiten mit vielen Inhalten. Bei langen Blogbeiträgen oder Anleitungen erspart es den Besuchern die Mühe, ganz nach oben scrollen zu müssen, was ihr Surferlebnis angenehmer macht.

Verlangsamt ein Scroll-to-Top-Button meine Website?

Sollte es nicht. Die Plugin-Methode ist leichtgewichtig und auf Leistung optimiert, und der jQuery-Code-Schnipsel ist winzig. Daher wird er keine spürbaren Auswirkungen auf die Geschwindigkeit Ihrer Website haben.

Wo ist der beste Platz für den Scroll-to-Top-Button?

Die meisten Websites platzieren ihn in der unteren rechten Ecke des Bildschirms. Diese Stelle hält ihn sichtbar und leicht erreichbar, ohne vom Hauptinhalt abzulenken.

Kann ich anstelle eines Bildes einen Textlink für meine Schaltfläche verwenden?

Absolut. Sowohl die Plugin- als auch die benutzerdefinierten Code-Methoden können mit einem einfachen Textlink „Zurück nach oben“ anstelle eines Symbols eingerichtet werden. Das Plugin bietet diese Option sofort, und bei der Code-Methode passen Sie einfach das HTML und CSS an Ihren Stil an.

Weiterführende Lektüre: Weitere Ressourcen rund um WordPress-Themes

Wir hoffen, dieser Artikel hat Ihnen geholfen, einen reibungslosen Scroll-to-Top-Effekt auf Ihrer Website mit jQuery hinzuzufügen. Das Anpassen Ihres Themes mit Funktionen wie dieser ist nur ein Schritt beim Aufbau einer benutzerfreundlichen Website. Möchten Sie tiefer in WordPress-Themes eintauchen? Diese Ressourcen werden Ihnen helfen:

• Beliebteste und beste WordPress-Themes
• Was passiert, wenn Sie Ihr WordPress-Theme wechseln?
• Dinge, die Sie UNBEDINGT TUN müssen, bevor Sie WordPress-Themes ändern
• Was ist ein WordPress Theme Framework und was sind die besten Theme Frameworks?
• So passen Sie Ihr WordPress-Theme an
• So finden Sie heraus, welche Dateien Sie in einem WordPress-Theme bearbeiten müssen
• So verwenden Sie den WordPress Theme Customizer wie ein Profi
• Ein vollständiger Leitfaden für Anfänger zur vollständigen Website-Bearbeitung in WordPress

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