Hallo,

ich brauchte ein wenig Zeit, für mich, um selbst herumzufrickeln.

Genau diesen Artikel hatte ich u.a. ergoogelt und versucht diese Lösung umzusetzen.

Ich fand es einfach prima, so ohne jegliche scripte.

Erst wollte es nicht funktionieren, bis ich mal den übergeordneten Kindelementen position: relative und absolute erteilte und noch anderen Höhenanpassungen (Betrifft top und margin-top und das errechnen mit calc) geändert hatte und nun scheint es zu funktionieren:

Testseite-V10d.html

Getestet: Win10 FF 124.0.2 (64bit) / Opera One(Version: 108.0.5067.40) (64bit) / Edge 123.0.2420.81 (64-Bit) / Chrome 123.0.6312.123 (64-Bit)

zusätzlich: Win7 FF 115.9.1esr (64bit) / Edge 109.0.1580.140 (64bit)

Ich bitte euch die ihr vielleicht andere Browser-(Versionen) habt es auch zu testen.

Dennoch bleibt ein (kleines) Problemchen: Bei einem sehr schmalen Bildschirmfenster ist es zu sehen.

Meiner Meinung nach kann es nur am querie min-width: 33.75em liegen, da alles was darunter ist, halt nicht mehr grid ist und schlicht untereinander dargestellt wird. Aber der skip-to-top-Link und auch der footer stehen unatürlich weiter oben, und überlagert den main-Inhalt.

Das muss ich noch ändern eventuell max-width: 120em ausprobieren. Das aber erst morgen.

Ich habe mir aber auch die "OnePager mit skip-to-top-Link" - Lösung von Matthias genauer angeschaut.

Im Grunde gefällt mir auch diese Herangehensweise. Nur ist es nicht ganz meine natürliche Art herunterzusrollen, da beim leichten scrollen gleich die nächste Überschrift oben am Bildschirmrand klebt. Und ich frage mich wie das Verhalten wäre wenn die sections einen längeren Text oder gar Fotos oder Videos beinhalten.

Ich muss aber sagen das ein Vorteil dieser Lösung wäre, das jeweils unter den sections sich der skip-to-top-Link befindet, auch bei einem ganz schmalen Bildschirmfenster.

Wie auch immer, morgen gehts weiter.

Gruß der einsiedelnde