Smooth Scroll – Elegantes Scrollen mit jQuery zu einer Sprungmarke
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
2. Setze deine Anker an der entsprechenden Stelle im Template
<h2 id="sprungmarke-1">Ich bin eine Sprungmarke</h2>3. Kopiere folgenden Javascript Code in den Footer Deiner Webseite.
Hinweis: die jQuery Library muss eingebunden sein!
jQuery(window).load(function() {
jQuery('a[href*=#]').click(function(){
jQuery('html, body').animate({
scrollTop: jQuery( jQuery(this).attr('href') ).offset().top
}, 1000);
return false;
});
});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.
scrollTop: jQuery( jQuery(this).attr('href') ).offset().top - 100
thank a lot for your web site it helps a whole lot.