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

Ich bin eine Sprungmarke

3. Kopiere folgenden Javascript Code in den Footer Deiner Webseite.

Hinweis: die jQuery Library muss eingebunden sein!

jQuery(window).load(function() {
	jQuery('a').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

oliver Ich heisse Oli und komme aus dem wuseligen Berlin. Meine Leidenschaft für Webseiten hält seit mehr 10 Jahren an. Dabei ist es egal ob ich kleinere oder größere Projekte umsetze - ich hänge mich in jedes Projekt mit voller Leidenschaft rein und versuche mich dabei immer wieder neu zu entdecken und neue Ideen umzusetzen.

Hinterlasse ein Kommentar

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.