Smooth Scroll – Elegantes Scrollen mit jQuery zu einer Sprungmarke
Verfasst am 24.03.2015
Update 15.04.2025
In längeren Beiträgen oder auf Einseiten-Webseiten macht es Sinn Sprungmarken einzubauen um zwischen den unterschiedlichen Elementen und Ebenen zu navigieren. Zum einen mag das Google, was man dran erkennen kann, dass selbst Sprungmarkenziele in den Serps auftauchen und zum anderen bietet man dem Besucher die Möglichkeit schnell zu die für Ihn interessanten Themen zu springen.
Leider springen die Browser sehr unschön und abrupt zu den Sprungmarken. Dies kann man jedoch mit jQuery abfangen und so einen eleganten Smooth Scroll Effekt einbauen. Wie man den Smooth-Scroll Effekt einbindet, das zeige ich euch im folgenden.
So integrierst Du den eleganten Smooth Scroll Effekt
1. Setze deine Sprungmarke auf deiner Webseite
plaintext
<a href="#sprungmarke-1">Sprungmarke 1</a>
Mehr anzeigen
2. Setze deine Anker an der entsprechenden Stelle im Template
plaintext
<h2 id="sprungmarke-1">Ich bin eine Sprungmarke</h2>
Mehr anzeigen
3. Kopiere folgenden Javascript Code in den Footer Deiner Webseite.
Hinweis: die jQuery Library muss eingebunden sein!
javascript
jQuery(window).load(function() {
jQuery('a[href*=#]').click(function(){
jQuery('html, body').animate({
scrollTop: jQuery( jQuery(this).attr('href') ).offset().top
}, 1000);
return false;
});
});
Mehr anzeigen
Smooth Scroll Effekt bei Fixed Header
Manchmal ist es so, dass man einen Header hat, der position="fixed" ist. Das weiß der Anker natürlich nicht und springt an den obersten Rand des Bildschirms. So kann es sein, dass die Überschrift oder die ersten Zeilen nicht zu sehen sind. Das ist natürlich ärgerlich, aber auch das kann man mittels jQuery gut und einfach lösen. Gibt einfach den Abstand hinter .offset().top ein, den Ihr vom oberen Bildschirmrand haben wollt. In meinem Beispiel sind das 100.
javascript
scrollTop: jQuery( jQuery(this).attr('href') ).offset().top - 100
Mehr anzeigen
2 Likes
1 Kommentar
Schreibe ein Kommentar zu Smooth Scroll – Elegantes Scrollen mit jQuery zu einer Sprungmarke
thank a lot for your web site it helps a whole lot.