Die besten kostenlosen WordPress-Smooth-Scroll-Plugins 2022
Veröffentlicht: 2021-11-09
Wenn Sie eine Website erstellt haben, der Inhalt der Website jedoch zu lang ist und in dieser Situation nicht leicht zu verstehen ist, können Sie WordPress Smooth Scroll Plugins verwenden.
WordPress Smooth-Scroll-Plugins helfen Ihnen dabei, die Website sehr reibungslos auf und ab zu scrollen. Es wird nicht nur die Benutzererfahrung Ihrer Website verbessern, sondern auch einen großen Einfluss auf die Konversionsrate haben. Weil Ihre Benutzer länger auf Ihrer Website bleiben.
Wie füge ich mit jQuery einen Smooth Scroll to Top-Effekt in WordPress hinzu?
Fragen Sie sich, warum verschiedene andere Websites einen reibungslosen Scroll-Effekt zum Seitenanfang haben? Es ist ideal zum Hinzufügen eines glatten Scroll-Top-Effekts, wenn Sie eine lange Seite haben.
Dies trägt dazu bei, die Erfahrung Ihrer Benutzer auf Ihrer Seite zu verbessern, und erleichtert es ihnen gleichzeitig, schnell wieder an die Spitze zu gelangen.
Nun stellt sich die Frage, wie fügen Sie dem Top-Effekt Ihrer WordPress-Site einen reibungslosen Bildlauf hinzu? Nun, Sie können dies ganz einfach mit jQuery tun. Hier werden wir darüber sprechen, wie Sie dies ganz einfach mit jQuery tun können. Weiter lesen:
Was ist Smooth Scroll und wann wird es verwendet?
Falls eine Seite oder ein Beitrag viele Inhalte enthält, müssen Benutzer nach unten scrollen, um sie alle zu lesen. Wenn Benutzer anfangen, nach unten zu scrollen, beginnen Ihre Navigationslinks nach oben zu gehen.
Wenn der Benutzer mit dem Lesen fertig ist, muss er scrollen, um zu sehen, ob noch etwas für ihn übrig ist. Durch Scrollen zur obersten Schaltfläche kann der Leser schnell weitermachen. Sie können sich dafür entscheiden, diesen Textlink hinzuzufügen, ohne jQuery verwenden zu müssen.
<a href="#" title="Zurück nach oben">^Anfang</a>
Es wird die Leser innerhalb von Sekundenbruchteilen an den Anfang der Seite schicken, während sie nach oben scrollen. Es funktioniert als funktionales.
Das glatte Scrollen ist jedoch das Gegenteil davon. Das reibungslose Scrollen hilft dem Benutzer, zum oberen Bereich der Seite zurückzukehren. Dies trägt dazu bei, die Erfahrung der Benutzer auf Ihrer Website zu verbessern.
Smooth Scroll to Top-Effekt mit jQuery in WordPress hinzufügen?
Wenn Sie dem oberen Effekt einen reibungslosen Bildlauf hinzufügen möchten, können Sie jQuery verwenden. Gleichzeitig müssen Sie etwas CSS zusammen mit einer einzelnen Zeile für den HTML-Code zum Thema Ihres WordPress hinzufügen.
Um damit zu beginnen, müssen Sie zunächst einen Texteditor wie Notepad öffnen. Jetzt müssen Sie eine Datei erstellen und als smoothscroll.js speichern. Jetzt müssen Sie einen Code in den Dateibereich kopieren und einfügen:
jQuery(document).ready(function($){
$(Fenster).Scroll(Funktion(){
if ($(this).scrollTop() < 200) {
$('#glätten') .fadeOut();
}
anders {
$('#glätten') .fadeIn();
}
});
$('#smoothup').on('click', function(){
$('html, body').animate({scrollTop:0}, 'fast');
falsch zurückgeben;
});
});
Jetzt müssen Sie die Datei speichern. Danach können Sie es in den Ordner /js /folder des WordPress-Theme-Verzeichnisses hochladen. Falls Ihr Thema kein / js / -Verzeichnis hat, müssen Sie damit beginnen, eines zu erstellen.
Danach können Sie die smoothscroll.js in dieses Verzeichnis hochladen. Dieser Code wird als jQuery-Skript bezeichnet, das der Schaltfläche einen glatten Bildlaufeffekt hinzufügt. Es wird dem Benutzer im Grunde helfen, reibungslos zum Anfang der Seite zu gelangen.
Danach müssen Sie diese smoothscroll.js zu Ihrem Themenbereich hinzufügen. Wenn Sie dies tun möchten, müssen Sie ein Skript in WordPress hinzufügen. Hier ist das Skript oder der Code, den Sie in die Datei functions.php Ihres Designs einfügen müssen:
wp_enqueue_script('smooth up', get_template_directory_uri() . '/js/smoothscroll.js', array('jquery' ), ", true );
Dieser Code sendet WordPress den Befehl an das Skript. Gleichzeitig weist es WordPress auch an, die jQuery-Bibliothek zu laden, da das Plugin davon abhängig ist.
Da Sie mit dem Hinzufügen des jQuery-Teils fertig sind, müssen Sie jetzt den eigentlichen Link zur WordPress-Site hinzufügen, der den Benutzer zurück zum oberen Bereich führt. Sie müssen einen HTML-Code an einer beliebigen Stelle in der Datei footer.php Ihres Designs einfügen:
<a href="#top" title="Zurück nach oben"></a>
Dieser Schritt beinhaltet das Hinzufügen des Links zur Datei, aber es wird kein Text verlinkt. Dies liegt daran, dass Sie ein Bildsymbol für den Aufwärtspfeil verwenden müssen, mit dem Sie eine Zurück-nach-oben-Schaltfläche anzeigen können.
So können Sie dem Stylesheet Ihres Themes ein 40x40px-Icon hinzufügen:
#glätten {
Höhe: 40px;
Breite: 40px;
Position:fest;
unten:50px;
rechts: 100px;
Texteinzug:-9999px;
Anzeige: keine;
Hintergrund: url("http://www.example.com/wp-content/uploads/2013/07/top_icon.png");
-webkit-Übergangsdauer: 0,4s;
-moz-Übergangsdauer: 0,4 s; Übergangsdauer: 0,4s;
}
#glätten:schweben {
-webkit-transform: rotieren (360 Grad) }
Hintergrund: URL('') keine Wiederholung;
}
Im oben genannten CSS haben Sie sich dafür entschieden, die Position des Bildsymbols zu vereisen. Es beinhaltet auch die Verwendung eines Bildsymbols als Hintergrundbild. Jetzt müssen Sie Ihr Bildsymbol mit Hilfe des WordPress-Medien-Uploaders hochladen.
Dann können Sie die Bild-URL erhalten, die Sie als Hintergrund-URL einfügen müssen. Da Sie der Schaltfläche eine CSS-Animation hinzugefügt haben, die die Schaltfläche weiterdreht, hält der Benutzer seinen Mauszeiger über der Schaltfläche.
Jetzt müssen Sie zum oberen Effekt scrollen, der es den Benutzern ermöglicht, zum oberen Bereich zurückzukehren und herauszufinden, was sie sonst noch auf Ihrer Website tun können.
Sie können auch eine schwebende Fußzeile hinzufügen, um die Funktionsinhalte einfach anzuzeigen. Falls Sie nicht möchten, dass Ihre Benutzer zum oberen Bereich scrollen, um den Artikel zu teilen, können Sie das Floating Social Share Bar-Plugin verwenden, um es viel einfacher zu verwalten.
Smooth-Scroll-Plugins von 2022 – sehr leichtgewichtig und schnell
WordPress Smooth Scroll Plugins funktionieren sicherlich viel schneller und effektiver auf allen anderen Geräten und Browsern ohne Probleme.
Außerdem funktioniert es hervorragend mit anderen Plugins wie Yoast SEO, Contact Form 7, NextGen Gallery, Slider Revolution, WooCommerce, SKT-Seitenerstellern, Visual Composer und Elementor und vielen mehr.
Websites von großen Unternehmen oder kleinen Unternehmen wie Blogs, Portfolio-Websites, Beratungs-Websites, Unternehmens-Websites, E-Commerce-Websites, Kreativagenturen, Immobilien-Websites, persönliche Lebensläufe, Websites von Einzelhandelsunternehmen usw. Kann WordPress Smooth Scroll-Plugins verwenden, um die zu verbessern Look and Feel der Website.
Viele kostenlose WordPress Scroll-Plugins sind verfügbar, aber wir haben die meisten Smooth-Scroll-Plugins hervorgehoben, die alle Ihre Besucher lieben werden. Bitte überprüfen Sie unten.
1. Seite scrollen zu id :
Die Page scroll to id ist Open-Source-Software, die vollständig charakterisiert und mit gut entwickelten Merkmalen und Funktionen ausgestattet ist. Es gibt Ihnen einen reibungslosen Scroll-Animationseffekt.
Page scroll to id Plugin ist einstellbar. Mit Hilfe der genannten ID und Offset berechnet dieses Plugin die Größe der Seite und setzt sie automatisch.
2. Sticky Menu (oder irgendetwas!) auf Scroll:
Das Sticky-Menü (oder irgendetwas anderes) im Scroll-Plugin ist kostenlos erhältlich. Es hilft Ihnen, ein Menü oder ein beliebiges Element klebrig zu machen. Sobald Sie auf ein Sticky-Element klicken, werden Sie direkt zum Anfang der Seite gescrollt. Sie benötigen nur ein paar oder grundlegende Kenntnisse in HTML/CSS, um einfach das richtige Element zu entfernen, das Sie klebrig machen möchten.
3. WordPress Infinite Scroll – Ajax Load More:
Ajax Load more wurde speziell für WordPress-Benutzer erstellt, damit sie reibungslos durch die Website scrollen können. Ajax Load More hilft beim Laden von faulen Posts, einzelnen Posts, Seiten und Kommentaren. Diese Plugins sind am bekanntesten für E-Commerce-Plugins wie WooCommerce
4. Einfache glatte Scroll-Links:
Sie können selbst ein Bottom-to-Top-Feature erstellen. weil SEasy Smooth Scroll Links ein anpassbares und sehr leichtgewichtiges Plugin ist.
Sie müssen nur eines der Bilder auswählen, um Scroll-Up-Elemente festzulegen. Außerdem können Sie die Elementposition auf die linke, mittlere und rechte Seite anpassen. Auch dieses Plugin ist Open-Source-Software.
5. MouseWheel Smooth Scroll:
Das MouseWheel Smooth Scroll-Plug-In lässt sich für alle Ankerlinks sehr reibungslos scrollen. Es wird normalerweise auf der rechten Seite platziert, wodurch die Seite von unten nach oben gescrollt wird.
Daher unterstützt dieses Plugin RTL und erstellt keine nutzlosen Menüpunkte im WordPress-Dashboard.
6. Smooth Scroll von WPOS:
Da das Smooth Scroll by WPOS-Plugin leichtgewichtig ist, kann man das Scrollen von oben nach unten auf jeder Seite einfach anpassen. Sie müssen nicht einmal eine einzige Codezeile schreiben.
Man kann die Animationsgeschwindigkeit, Art, Höhe, Breite usw. nach Bedarf anpassen. Dieses Plugin funktioniert besser mit Elementor Page Builder
7. Einfach nach oben scrollen:
Man kann dem Ankerlink einen sanften Scroll-Effekt hinzufügen, aber auf derselben Seite. Diese Effekte können auf die gesamten Posts und Seiten oder auf bestimmte Posts und Seiten angewendet werden. Sie finden diese Einstellung in der Dashboard-Einstellung>>Simple Scroll to Top Button.
– Wählen Sie diese Option, um sich für alle Beiträge und Seiten zu bewerben
– Nur Startseite auswählen
– Wählen Sie nur die bestimmten Seiten aus
– Wählen Sie nur die bestimmten Beiträge aus
– Bestimmen Sie die Geschwindigkeit des Scrollens
8. NS Smooth nach oben scrollen:
Die Surbma hat mehr aktive Benutzer. Da dieses Plugin auch ein glattes Scrollen ist. Sie können den Effekt für jeden Ankerlink auf Ihrer Website erzielen. Ein sanfter Scroll-Effekt kann dem Menü oder jedem Navigationsteil hinzugefügt werden.
Sie müssen es nicht einmal anpassen, da für dieses Plugin keine Option angegeben ist. Wenn Sie über Kenntnisse und Erfahrung in der JavaScript- und WordPress-Programmierung verfügen, können Sie einige Änderungen nach Bedarf vornehmen. Aber wenn Sie es nicht haben, werde ich vorschlagen, dass Sie es nicht berühren. da es sofort nach der Installation funktioniert.
9. WPFront-Scroll-Top:
Mit dem WPFront Scroll Top Plugin können Sie ganz einfach von unten nach oben scrollen. Es ist vollständig anpassbar mit verschiedenen Optionen zur Auswahl. Mit einigen Animationen wird es zurück nach oben gescrollt.
Sie können selbst Texte, Bilder und Schaltflächen erstellen. Außerdem können Sie Seiten und Beiträge filtern.
10. Fange die unendliche Schriftrolle:
Catch Infinite Scroll hilft Ihnen, die Benutzerinteraktion auf Ihrer Website zu steigern. Der Hauptgrund dafür ist eine unendliche Jetpack-Schriftrolle. Sobald Ihre Plugins installiert und aktiviert sind, können Ihre Kunden und Benutzer die Website-Seite scrollen.
Dies sind alles die besten kostenlosen WordPress Smooth Scroll Plugins 2022.