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

Hinterlasse doch ein Kommentar zu Smooth Scroll – Elegantes Scrollen mit jQuery zu einer Sprungmarke

Wenn dir der Beitrag Smooth Scroll – Elegantes Scrollen mit jQuery zu einer Sprungmarke gefallen hat oder du Kritik bzw. Verbesserungsvorschläge hast, dann würde ich mich freuen, wenn Du ein Kommentar hinterlassen würdest.

Hinterlasse ein Kommentar zum Beitrag "Smooth Scroll – Elegantes Scrollen mit jQuery zu einer Sprungmarke"

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