Wie man in WordPress mit jQuery einen glatten Bildlauf nach oben hinzufügt

Das Hinzufügen eines sanften Scroll-Effekts am oberen Rand kann die Benutzerfreundlichkeit Ihrer Website verbessern. Er ist besonders nützlich, wenn Sie eine lange Seite haben, damit die Besucher schnell zum Anfang zurückkehren.

Die Einrichtung von scroll-to-top mag einschüchternd wirken, also haben wir beschlossen, es selbst auszuprobieren. Und wir haben festgestellt, dass es mit jQuery oder einem kostenlosen Plugin ganz einfach auf Ihrer WordPress-Website einzurichten ist.

In diesem Artikel zeigen wir Ihnen Schritt für Schritt, wie Sie in WordPress einen glatten Scroll-to-Top-Effekt hinzufügen können.

Was ist Smooth Scroll, und wann sollten Sie es verwenden?

Wenn die Website nicht über ein oben gehaltenes Header-Menü verfügt, müssen Benutzer, die in einem langen WordPress-Beitrag oder auf einer langen Seite nach unten scrollen, manuell zurück nach oben wischen oder scrollen, um auf der Website zu navigieren.

Das kann ein echtes Ärgernis sein, und oft klicken Benutzer einfach auf den Button „Zurück“ und verlassen die Seite. Deshalb brauchen Sie einen Button, der Benutzer schnell an den Anfang des Beitrags oder der Seite bringt.

In der Regel können Sie diese Funktionalität als einfachen Link ohne jQuery einfügen, etwa so:

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

Dadurch werden die Benutzer innerhalb von Millisekunden auf der gesamten Seite nach oben gescrollt. Es funktioniert, aber der Effekt kann störend sein, so wie wenn man über eine Bodenwelle fährt.

Ein sanfter Bildlauf ist das Gegenteil davon. Es lässt den Benutzer mit einem visuell ansprechenden Effekt wieder nach oben sliden. Der Einsatz solcher Elemente kann die Benutzererfahrung auf Ihrer Website drastisch verbessern.

In diesem Sinne stellen wir Ihnen zwei Methoden vor, mit denen Sie auf Ihrer WordPress Website mithilfe eines Plugins und jQuery einen sanften Scroll-to-Top-Effekt erzielen können. Nutzen Sie die Links unten, um zu Ihrer bevorzugten Methode zu gelangen:

Beginnen wir ohne weiteres mit der ersten Methode.

Hinzufügen eines glatten Scroll-to-Top-Effekts mit einem WordPress Plugin

Diese Methode wird Anfängern empfohlen, da sie es Ihnen ermöglicht, einer WordPress-Website einen Scroll-to-top-Effekt hinzuzufügen, ohne eine einzige Codezeile zu berühren.

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

Nach der Aktivierung können Sie von Ihrem WordPress-Dashboard aus zu Einstellungen “ Scroll Top gehen. Hier können Sie das Plugin konfigurieren und den Smooth-Scroll-Effekt individuell anpassen.

Hier müssen Sie als Erstes auf das Kontrollkästchen „Aktiviert“ klicken, um den „Scroll-to-top“-Button auf Ihrer Website zu aktivieren. Als Nächstes sehen Sie Optionen zum Bearbeiten des Scroll-Offsets, der Button-Größe, der Deckkraft, der Überblendungsdauer, der Scrolldauer und mehr.

Wenn Sie nach unten scrollen, finden Sie weitere Optionen, wie z. B. die Bearbeitung der Zeit für das automatische Ausblenden und die Aktivierung der Option zum Ausblenden des Buttons auf kleinen Geräten oder auf der Ansicht des wp-admin.

Sie können auch bearbeiten, was der Button macht, wenn Sie ihn anklicken. Standardmäßig scrollt sie zum Anfang der Seite, aber Sie können sie so ändern, dass sie zu einem bestimmten Element im Beitrag oder sogar zu einem Link zu einer Seite scrollt.

Außerdem können Sie die Position des Buttons anpassen. Während sie normalerweise in der rechten unteren Ecke der Ansicht erscheint, haben Sie die Option, sie in eine beliebige andere Ecke zu verschieben.

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

Normalerweise wird er auf allen Seiten Ihres WordPress-Blogs angezeigt. Sie können jedoch zum Abschnitt „Auf Seiten anzeigen“ navigieren und dort auswählen, wo Sie den „Scrolling to the top“-Effekt anzeigen möchten.

Das Plugin bietet auch vorgefertigte Buttons-Designs. Sie sollten leicht ein Design finden können, das zu Ihrer Website passt.

Wenn Sie keinen vorgefertigten Button finden, der Ihnen zusagt, gibt es die Option, ein individuelles Bild aus der Mediathek von WordPress hochzuladen.

Wenn Sie fertig sind, klicken Sie einfach auf den Button „Änderungen speichern“.

Sie können nun Ihre Website besuchen, um den „Scroll-to-top“-Button in Aktion zu sehen.

Hinzufügen eines glatten Bildlaufs zum oberen Rand mit jQuery in WordPress

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

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

Öffnen Sie zunächst einen Texteditor wie Notepad und erstellen Sie eine Datei. Speichern Sie sie unter dem Namen 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 einer Schaltfläche, die den Benutzer an den Anfang der Seite bringt, einen sanften Bildlaufeffekt verleiht.

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 zum Hochladen von Dateien in WordPress mit FTP.

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

Weitere Informationen finden Sie auch in unserem Leitfaden über die Datei- und Verzeichnisstruktur von WordPress.

Als nächstes müssen Sie die Datei smoothscroll.js in Ihr Theme laden.

Dazu wird das Skript in WordPress durch Kopieren und Einfügen dieses Codes in die Datei functions.php Ihres Themes aufgerufen.

Wir raten jedoch davon ab, die Dateien des Themes direkt zu bearbeiten, da der kleinste Fehler Ihre Website zerstören kann. Stattdessen können Sie ein Plugin wie WPCode verwenden und unserer Anleitung zum Hinzufügen individueller Codeschnipsel 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.

Nun, da wir jQuery hinzugefügt haben, fügen wir einen Link zu unserer WordPress Website hinzu, der Benutzer zurück zum Anfang bringt.

Fügen Sie dazu einfach diesen HTML-Code mit WPCode an beliebiger Stelle in die Datei footer.php Ihres Themes ein. Wenn Sie Hilfe benötigen, lesen Sie bitte unsere Anleitung zum Hinzufügen von Header- und Footer-Code 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 Pfeil nach oben verwenden werden, um einen Back-to-Top Button anzuzeigen.

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

In diesem Code verwenden wir ein Bildsymbol als Hintergrundbild für den Button und setzen es an eine feste Position. Wir haben auch eine kleine CSS-Animation hinzugefügt, die den Button dreht, wenn ein Benutzer mit der Mauszeigerkontakt 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 sicher, dass Sie in der obigen CSS-Datei https://www.example.com/wp-content/uploads/2013/07/top_icon.png durch die gewünschte URL für das Bild ersetzen .

Sie können Ihr eigenes Bildsymbol mit dem WordPress Media-Uploader hochladen, die URL des Bildes kopieren und sie dann in den Code einfügen.

Und das war’s auch schon!

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, mit jQuery einen sanften Scroll-to-Top-Effekt auf Ihrer Website zu erzielen. Vielleicht interessiert Sie auch unsere Expertenliste der Dinge, die Sie vor dem Wechsel von WordPress Themes unbedingt tun müssen, und wie Sie herausfinden, welche Dateien Sie in einem WordPress Theme bearbeiten müssen.

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