![\"Scrollen](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/05\/scrolltotop.jpg\")
<\/p>\nHaben Sie Websites gesehen, die einen reibungslosen Bildlauf oben auf der Seite erm\u00f6glichen? Dies ist ideal, wenn Sie eine lange Seite haben und den Benutzern eine einfache M\u00f6glichkeit bieten m\u00f6chten, zum Anfang zur\u00fcckzukehren. K\u00fcrzlich fragte uns einer unserer Leser, wie wir dem Haupteffekt in WordPress ein reibungsloses Scrollen hinzuf\u00fcgen k\u00f6nnen. In diesem Artikel zeigen wir Ihnen, wie Sie reibungsloses Scrollen hinzuf\u00fcgen, um mit jQuery den besten Effekt in WordPress zu erzielen.<\/p>\n
Hinweis: Dieses Tutorial wurde f\u00fcr einen DIY-Fortgeschrittenen erstellt, der seine Themen bequem bearbeiten kann. Wenn Sie eine Plugin-Methode verwenden m\u00f6chten, navigieren Sie auf der programmierbaren Seite zum obersten Plugin. F\u00fcr diejenigen, die lernen m\u00f6chten, wie man dies ohne Plugin macht, lesen Sie weiter.<\/p>\n
<\/p>\n
Wenn eine Seite oder ein Beitrag viel Inhalt enth\u00e4lt, m\u00fcssen Benutzer nach unten scrollen, um diesen Inhalt zu lesen. Wenn Benutzer nach unten scrollen, werden alle Navigationslinks vergr\u00f6\u00dfert. Wenn Benutzer diesen Artikel gelesen haben, sollten sie nach oben scrollen, um zu sehen, was auf der Website noch zu tun ist. Wenn Sie zum oberen Rand scrollen, gelangen Benutzer schnell zum oberen Rand der Seite. Sie k\u00f6nnen dies wie folgt als Textlink hinzuf\u00fcgen, ohne jQuery zu verwenden: <\/p>\n
^ Oben<\/p>\n
Es sendet Benutzer einfach an den Anfang der Seite und scrollt die gesamte Seite in Millisekunden. Es ist funktional, aber es ist wie ein Hit auf der Stra\u00dfe. Reibungsloses Scrollen ist das Gegenteil davon. Schieben Sie den Benutzer vorsichtig an den Anfang der Seite. Dies erzeugt einen sch\u00f6nen Effekt und verbessert die Benutzererfahrung. <\/p>\n
Um dem Top-Effekt einen reibungslosen Bildlauf hinzuzuf\u00fcgen, verwenden wir jQuery, etwas CSS und eine einzelne Zeile HTML-Code in Ihrem WordPress-Design. \u00d6ffnen Sie zun\u00e4chst einen Texteditor wie Notepad. Erstellen Sie eine Datei und speichern Sie sie als glattscroll.js. Kopieren Sie diesen Code und f\u00fcgen Sie ihn in die Datei ein: <\/p>\n
jQuery (Dokument) .ready (Funktion ($) {
$ (Fenster) .scroll (Funktion () {
if ($ (this) .scrollTop () <\/p>\n
Speichern Sie die Datei und laden Sie sie in den Ordner \/ js \/ im WordPress-Themenverzeichnis hoch (siehe So verwenden Sie FTP zum Hochladen von Dateien zu WordPress). Wenn Ihr Design kein \/ js \/ -Verzeichnis hat, erstellen Sie eines und laden Sie die Datei glattscroll.js hinein. Dieser Code ist das jQuery-Skript, das einer Schaltfl\u00e4che, die Benutzer an den Anfang der Seite f\u00fchrt, einen reibungslosen Bildlaufeffekt hinzuf\u00fcgt. <\/p>\n
Als N\u00e4chstes f\u00fcgen Sie Ihrem Themaoothscroll.js hinzu. Um es richtig zu machen, werden wir das Skript in WordPress einf\u00fcgen (weitere Informationen finden Sie in unserer Anleitung zum korrekten Hinzuf\u00fcgen von Skripten in WordPress). Kopieren Sie diesen Code und f\u00fcgen Sie ihn in die Datei functions.php Ihres Themas ein. <\/p>\n
wp_enqueue_script (‘Gl\u00e4ttung’, get_template_directory_uri (). ‘\/js\/smoothscroll.js’, Array (‘jquery’), ‘, true);<\/p>\n
Im obigen Code haben wir WordPress angewiesen, unser Skript und auch die jQuery-Bibliothek zu laden, da unser Plugin davon abh\u00e4ngt. Nachdem wir den jQuery-Teil hinzugef\u00fcgt haben, f\u00fcgen wir einen echten Link zu unserer WordPress-Site hinzu, der die Benutzer an die Spitze bringt. F\u00fcgen Sie diesen HTML-Code an einer beliebigen Stelle in die Datei footer.php Ihres Themas ein. <\/p>\n
Wie Sie bemerkt haben, haben wir einen Link hinzugef\u00fcgt, aber wir haben ihn nicht mit einem Text verkn\u00fcpft. Dies liegt daran, dass wir ein Bildsymbol mit einem Aufw\u00e4rtspfeil verwenden, um eine Schaltfl\u00e4che “Zur\u00fcck nach oben” anzuzeigen. In diesem Beispiel verwenden wir ein 40x40px-Symbol. F\u00fcgen Sie dies dem Stylesheet Ihres Themas hinzu. <\/p>\n
#smoothup {
H\u00f6he: 40px;
Breite: 40 px;
Position: fest;
unten: 50px;
rechts: 100 px;
Einr\u00fcckung des Textes: -9999px;
Zeige keine;
Hintergrund: URL (“https:\/\/www.example.com\/wp-content\/uploads\/2013\/07\/top_icon.png”);
-Webkit-\u00dcbergangsdauer: 0,4s;
-Moz-\u00dcbergangsdauer: 0,4 s; \u00dcbergangsdauer: 0,4 s;
}}<\/p>\n
#smoothup: schwebe \u00fcber {
-webkit-transform: drehen (360 Grad)}
Hintergrund: URL (\u201d) ohne Wiederholung;
}}<\/p>\n
Im obigen CSS haben wir eine feste Position f\u00fcr das Bildsymbol und ein Bildsymbol als Hintergrundbild verwendet. Sie k\u00f6nnen das Symbol Ihres Bildes mit WordPress Media Loader laden und dann die URL des Bildes als Hintergrund-URL einf\u00fcgen. Wir haben der Schaltfl\u00e4che auch eine kleine CSS-Animation hinzugef\u00fcgt, die sich dreht, wenn der Benutzer dar\u00fcber f\u00e4hrt. <\/p>\n
Wenn Sie zum obersten Effekt scrollen, k\u00f6nnen Benutzer zum Anfang zur\u00fcckkehren und andere Aufgaben auf Ihrer Website finden. Sie k\u00f6nnen auch eine schwebende Fu\u00dfzeile hinzuf\u00fcgen, wie wir sie auf unserer Website haben, um vorgestellten Inhalt anzuzeigen. Wenn Sie nicht m\u00f6chten, dass Ihre Benutzer einen Bildlauf durchf\u00fchren, um Ihren Artikel zu teilen, empfehlen wir Ihnen dringend, das schwebende Plugin f\u00fcr die Leiste zum Teilen von sozialen Netzwerken zu verwenden, wie wir es in WPBeginner getan haben.<\/p>\n
Wir hoffen, dass dieser Artikel dazu beigetragen hat, mit jQuery einen reibungslosen Bildlauf zum oberen Seiteneffekt Ihrer Website hinzuzuf\u00fcgen. Weitere n\u00fctzliche Anwendungen von jQuery in WordPress finden Sie in unserem Artikel mit h\u00e4ufig gestellten Fragen zum jQuery-Akkordeon oder im Artikel zum langsamen Laden von Bildern <\/p>\n
Halten Sie es f\u00fcr n\u00fctzlich, zum obersten Effekt zu scrollen? Lass es uns wissen, indem du unten einen Kommentar hinterl\u00e4sst.<\/p>\n ","protected":false},"excerpt":{"rendered":"
Haben Sie Websites gesehen, die einen reibungslosen Bildlauf oben auf der Seite erm\u00f6glichen? Dies ist ideal, wenn Sie eine lange Seite haben und den Benutzern eine einfache M\u00f6glichkeit bieten m\u00f6chten, zum Anfang zur\u00fcckzukehren. K\u00fcrzlich fragte uns einer unserer Leser, wie wir dem Haupteffekt in WordPress ein reibungsloses Scrollen hinzuf\u00fcgen k\u00f6nnen. In diesem Artikel zeigen wir […]<\/p>\n","protected":false},"author":1,"featured_media":37580,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","fifu_image_url":"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/06\/Como-agregar-desplazamiento-suave-para-obtener-el-mejor-efecto-en.jpg","fifu_image_alt":""},"categories":[7],"tags":[525,9349,249,10832,126,10833,300,304,1156,86,10831,60,51],"_links":{"self":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/37579"}],"collection":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/comments?post=37579"}],"version-history":[{"count":0,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/37579\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media\/37580"}],"wp:attachment":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media?parent=37579"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/categories?post=37579"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/tags?post=37579"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}