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?

Smooth Scroll 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. Sie sollten ihn verwenden, wenn Sie den Benutzern eine weniger abrupte Möglichkeit bieten möchten, lange Seiten zu navigieren, insbesondere für Funktionen wie „Zurück nach oben“-Schaltflächen.

Es sei denn, die Website hat ein Sticky-Header-Menü, Benutzer, die zum Ende eines langen WordPress-Beitrags oder einer Seite scrollen, müssen 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 senden.

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 gleitet den Benutzer mit einem visuell ansprechenden Effekt zurück nach oben. 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:

• Tipp 1: Hinzufügen eines sanften Scroll-to-Top-Effekts mit einem WordPress-Plugin (einfach)
• Tipp 2: Hinzufügen eines sanften Scroll-to-Top-Effekts mit jQuery in WordPress (Fortgeschritten)
• Bonustipp: Weitere subtile Animationseffekte, um Besucher zu fesseln
• FAQs: Hinzufügen eines Scroll-to-Top-Effekts in WordPress mit jQuery
• Weiterführende Lektüre: Weitere Ressourcen rund um WordPress-Themes

Ohne weitere Umschweife beginnen wir mit der ersten Methode.

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 WPFront Scroll Top Plugin zu installieren und zu aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unseren Leitfaden zur Installation 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 der Button tut, wenn Sie darauf klicken. Standardmäßig scrollt er zum Seitenanfang, aber Sie können ihn so ändern, dass er 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 er 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 keinen vorgefertigten Bildbutton finden, der 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.

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

Bevor wir beginnen, beachten Sie, dass diese Methode für Anfänger nicht empfohlen wird. Sie eignet sich für Personen, die mit der Bearbeitung von Themes vertraut sind, da sie das Hinzufügen von Code zu Ihrer Website beinhaltet.

Um den sanften Scroll-to-Top-Effekt hinzuzufügen, verwenden wir jQuery, etwas CSS und eine einzige Zeile HTML-Code in Ihrem WordPress-Theme.

Öffnen Sie zunächst einen Texteditor wie Notepad und erstellen Sie eine Datei. Speichern Sie sie 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;
		});
});

Dieser Code ist das jQuery-Skript, das einem Button einen sanften Scroll-Effekt hinzufügt, der Benutzer zum Seitenanfang bringt.

Danach können Sie die Datei speichern und in den Ordner /js/ in Ihrem WordPress-Theme-Verzeichnis hochladen.

Weitere Details finden Sie in unserem Leitfaden zur Verwendung von FTP zum Hochladen von Dateien in WordPress.

Wenn Ihr Theme kein /js/-Verzeichnis hat, können Sie eines erstellen und smoothscroll.js dorthin hochladen.

Sie können auch unseren Leitfaden zur Dateien- und Verzeichnisstruktur von WordPress für weitere Informationen einsehen.

Das Nächste, was Sie tun müssen, ist, die Datei smoothscroll.js in Ihr Theme zu laden.

Dazu werden wir das Skript in WordPress einreihen, indem wir diesen Code einfach in die Datei functions.php Ihres Themes kopieren und einfügen.

Wir empfehlen jedoch nicht, die Theme-Dateien direkt zu bearbeiten, da der kleinste Fehler Ihre Website beschädigen kann.

Stattdessen können Sie ein Plugin wie WPCode, das beste Code-Snippet-Plugin für WordPress, verwenden und unserem Tutorial zum Hinzufügen von benutzerdefinierten Code-Snippets in WordPress folgen:

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

Der obige Code weist WordPress an, unser Skript und die jQuery-Bibliothek zu laden, da unser Plugin von ihnen abhängt.

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 diesen HTML-Code einfach mit WPCode irgendwo in die Datei footer.php Ihres Themes ein.

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

Wenn Sie Hilfe benötigen, sehen Sie sich unser Tutorial an: So fügen Sie Header- und Footer-Code in WordPress hinzu

Sie haben vielleicht bemerkt, dass der HTML-Code einen Link, aber keinen Ankertext enthält. Das liegt daran, dass wir ein Bildsymbol mit einem Pfeil nach oben verwenden werden, um eine Schaltfläche zum Zurück nach oben anzuzeigen.

In diesem Beispiel verwenden wir ein 40x40px großes Symbol. Fügen Sie einfach das unten stehende benutzerdefinierte CSS in die Stylesheet-Datei Ihres Themes ein.

In diesem Code verwenden wir ein Bildsymbol als Hintergrundbild der Schaltfläche und positionieren es fest. 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 gewünschte Bild-URL ersetzen.

Sie können Ihr eigenes Bildsymbol über den WordPress-Medien-Uploader hochladen, die Bild-URL kopieren und dann in den Code einfügen.

Und das ist im Grunde alles!

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.

Zum Beispiel lässt ein Parallax-Effekt Hintergrundbilder sich mit einer anderen Geschwindigkeit als Ihr Inhalt bewegen, was ein Gefühl von Tiefe und Bewegung erzeugt.

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 übersichtlich, indem die Suchleiste erst angezeigt wird, wenn jemand auf das Symbol klickt. Dies hilft Ihrem Design, weniger überladen zu wirken, während es für Besucher immer noch 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 zur Hinzufügung 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. 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 einem 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 viel Inhalt. Bei langen Blogbeiträgen oder Tutorials erspart es den Besuchern die Mühe, ganz nach oben zu scrollen, was ihre Browsererfahrung angenehmer macht.

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

Das sollte es nicht. Die Plugin-Methode ist leichtgewichtig und für die Leistung optimiert, und das jQuery-Code-Snippet ist winzig. Daher wird es 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 sanften Scroll-to-Top-Effekt auf Ihrer Website mit jQuery hinzuzufügen. 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.