Smooth Scroll mit Offset – Seiten übergreifend

Anklicken eines Ankerlinks, dann sanftes Scrollen zur Scrollposition, ggf. mit Offset. Im Idealfall sollte dies sowohl innerhalb einer Seite als auch über mehrere Seiten hinweg funktionieren.

Die css Anweisungen:

nutzen und gut ist. Oder?

Leider ist das nicht so einfach.

Eine Smooth-Scroll-Funktion zu einem Anker mit Offset, die sowohl seitenintern als auch seitenübergreifend funktioniert, ist nicht so einfach zu realisieren, wie es auf den ersten Blick scheinen mag, auch wenn manche Youtube-Tutorials dies suggerieren.

Einige Browser verhalten sich nicht in allen Situationen wie erwartet. Beispielsweise funktioniert der obige Code bei seitenübergreifenden Ankerlinks im Firefox derzeit nicht. Firefox ignoriert die Anweisung smooth.

Wird der Seitensprung selbst mit Javascript programmiert, treten weitere Probleme auf. Zum einen kann das Standardverhalten des Browsers, der den Ankerlink ausführt, bevor die eigenen Funktionen greifen, einen Strich durch die Rechnung machen. Zum anderen können Animationseffekte von Elementen auf der Zielseite die Berechnung der Ankerposition verfälschen.

Ein kurzes Googeln ergibt zwar unzählige Lösungen zur Implementierung von Smooth Scroll, die auf den ersten Blick auch funktionieren, aber bei den meisten habe ich im Laufe der Zeit immer wieder Probleme der oben genannten Art festgestellt.

Meine Scroll-Lösung sieht nun so aus. Einige Funktionen, wie z.B. die kurze Zeitverzögerung, erscheinen auf den ersten Blick unnötig, sind aber in der Praxis notwendig.

Anwendung:

Anker in Seiten definieren, die mit der Zeichenfolge „scroll“ beginnen, also z.B. so:

Ankerlinks setzen z.B. so:

Oder wenn seitenübergreifend nicht notwendig:

Javascript einbinden:

Den folgenden Javascript Code in die Seite oder in das Projekt entsprechend einbinden. Die Variable offset wie gewünscht setzen. Zum Beispiel bedeutet -92, dass die Ankerposition gleich Ankerposition -92 ist, was 92 Pixel über der Ankerposition entspricht. Der Offset kann natürlich auch auf 0 gesetzt werden, sodass exakt zur Ankerposition gescolllt wird. Der Offset kann auch auf positive Werte gesetzt werden, sodass unterhalb der Ankerposition gessrollt wird.

Viel Spaß beim Einbau.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert