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:
|
1 2 3 4 |
html { scroll-behavior: smooth; scroll-padding: 100px; } |
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.