OnePager mit skip-to-top-Link
bearbeitet von
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](http://misanthrop.bplaced.net/test/public/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.
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 schmalemn Bildschirmfenster.
Wie auch immer, morgen gehts weiter.
Gruß der einsiedelnde
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](http://misanthrop.bplaced.net/test/public/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.
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 schmale
Wie auch immer, morgen gehts weiter.
Gruß der einsiedelnde
OnePager mit skip-to-top-Link
bearbeitet von
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](http://misanthrop.bplaced.net/test/public/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.
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 ganz schmalem Bildschirmfenster.
Wie auch immer, morgen gehts weiter.
Gruß der einsiedelnde
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](http://misanthrop.bplaced.net/test/public/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.
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 ganz schmalem Bildschirmfenster.
Wie auch immer, morgen gehts weiter.
Gruß der einsiedelnde
OnePager mit skip-to-top-Link
bearbeitet von
Hallo,
ich brauchte ein wenig Zeit, für mich, um selbst herumzufrickeln.
Genau diesen Artikel hatte ich 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](http://misanthrop.bplaced.net/test/public/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.
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 ganz schmalem Bildschirmfenster.
Wie auch immer, morgen gehts weiter.
Gruß der einsiedelnde