Viele Worpress Themes bieten keine SmoothScroll-Funktion an. Sobald man diese allerdings irgendwie nachrüsten möchte, kommt es beim Webdesign oft zum gleichen Problem: Die WordPress Anchor Links scrollen zu weit. Meistens kommt dieses Phänomen durch ein fixiertes Navigationsmenü zustande, welches den obersten Teil der Webseite verdeckt. Um dies zu lösen muss man den JavaScript Code der Seite anpassen. Da jede Seite bzw. Theme eine individuelle Lösung dafür vorsehen kann, gibt es nicht die eine richtige Lösung.
Was wir euch heute allerdings zeigen wollen ist, wie ihr in nahezu jedem WordPress Theme die SmoothScroll Funktion einrichten und individuell anpassen könnt. Mit dem Plugin kommt allerdings nicht nur das optisch ansprechende langsame Scrollen anstelle des Springens zustande, ihr bekommt zusätzlich noch einen kleinen Scroll-To-Top Button auf eure Webseite integriert.
1. WordPress Plugin JQuery Smooth Scroll runter laden
Im ersten Schritt müsst ihr euch das JQuery Smooth Scroll Plugin runter laden und installieren
2. Anpassung im Plugin
Im zweiten Schritt müsst ihr die „js.min“-Datei des Plugins bearbeiten. Die Datei findet ihr an folgender Stelle in eurer WordPress-Installation: „/wp-content/plugins/jquery-smooth-scroll/js/js.min“
Am Ende dieser Datei, die zur Geschwindigkeitsoptimierung der Webseite komprimiert worden ist, müsst ihr den Code wie folgt anpassen:
.....
("html,body").animate({scrollTop:t.offset().top - 130 },n,a),!1}})});
Das war’s!
Kontrolliert welcher Wert in eurer WordPress-Installation anstelle der „130“ am Besten passt und fügt diesen ein. Anschließend sollte euer Anchor Link genau so weit nach unten bzw. oben scrollen wie ihr es euch vorstellt. Denk bitte auch hier daran, dass dieses Plugin stetig vom Hersteller aktualisiert wird und eure Änderungen gegebenenfalls durch ein Update des Plugins überschrieben werden können.
