Scroll-Bereich eines Buttons innerhalb einer Grid-Area bearbeitet von einsiedler 07.04.2024 02:39 Ich habe mal ein wenig herumexperimentiert.~~~ HTML<!-- SKIP - to TOP LINK --> <div id="skiptop" aria-labelledby="skiptop-label" class="scroll-top-wrapper"> <h2 class="visually-hidden">Skip-to-TOP</h2> <ul id="skiptop-label" class="scroll-top_link"> <li><a href="#skip-to-top"><span>skip to top</span></a></li> </ul> </div>~~~~~~ CSS#skiptop { grid-area: main-content / main-nav; position: relative;}.scroll-top-wrapper { position: absolute; top: 100vh; right: 0.25rem; bottom: -5em; width: 3em; pointer-events: none; display: inherit; grid-template-rows: inherit;}.scroll-top_link { position: fixed; position: sticky; pointer-events: all; top: calc(100vh - 5rem); display: inline-block; text-decoration: none; font-size: 2rem; line-height: 3rem; text-align: center; width: 3rem; height: 3rem; border-radius: 50%; padding: 0.25rem; border: 1px solid #254568; background-color: #d6e3f0; transition: transform 80ms ease-in;}~~~Damit habe ich zwar meinen gewünschten Effekt, aber durch das **100vh**wird das Grid-Raster nach unten hin überschritten.Warum ist das so?% - Werte funktionieren nicht, was gibt es noch für Möglichkeiten?Der Link zur betroffenen Seite ist immer-noch: [Testseite V10A](http://misanthrop.bplaced.net/test/public/Testseite-V10a.html)So lieber Felix. soviel zu Deinem Einzeiler, jetzt trete mal in Aktion.Aber auch an die anderen, bitte ich um Unterstützung. ich möchte mal voran kommen.Grüße der einsiedelde
Scroll-Bereich eines Buttons innerhalb einer Grid-Area bearbeitet von einsiedler 07.04.2024 02:43 Ich habe mal ein wenig herumexperimentiert.~~~ HTML<!-- SKIP - to TOP LINK --> <div id="skiptop" aria-labelledby="skiptop-label" class="scroll-top-wrapper"> <h2 class="visually-hidden">Skip-to-TOP</h2> <ul id="skiptop-label" class="scroll-top_link"> <li><a href="#skip-to-top"><span>skip to top</span></a></li> </ul> </div>~~~~~~ CSS#skiptop { grid-area: main-content / main-nav; position: relative;}.scroll-top-wrapper { position: absolute; top: 100vh; right: 0.25rem; bottom: -5em; width: 3em; pointer-events: none; display: inherit; grid-template-rows: inherit;}.scroll-top_link { position: fixed; position: sticky; pointer-events: all; top: calc(100vh - 5rem); display: inline-block; text-decoration: none; font-size: 2rem; line-height: 3rem; text-align: center; width: 3rem; height: 3rem; border-radius: 50%; padding: 0.25rem; border: 1px solid #254568; background-color: #d6e3f0; transition: transform 80ms ease-in;}~~~Damit habe ich zwar meinen gewünschten Effekt, aber durch das **100vh**wird das Grid-Raster nach unten hin überschritten.Warum ist das so?~~~% - Werte funktionieren nicht, was gibt es noch für Möglichkeiten?Der Link zur betroffenen Seite ist immer-noch: [Testseite V10A](http://misanthrop.bplaced.net/test/public/Testseite-V10a.html)So lieber Felix. soviel zu Deinem Einzeiler, jetzt trete mal in Aktion.Aber auch an anderen, bitte ich um Unterstützung. ich möchte mal voran kommen.Grüße der einsiedelde
Scroll-Bereich eines Buttons innerhalb einer Grid-Area bearbeitet von einsiedler 07.04.2024 02:42 Ich habe mal ein wenig herumexperimentiert. ~~~ HTML <!-- SKIP - to TOP LINK --> <div id="skiptop" aria-labelledby="skiptop-label" class="scroll-top-wrapper"> <h2 class="visually-hidden">Skip-to-TOP</h2> <ul id="skiptop-label" class="scroll-top_link"> <li><a href="#skip-to-top"><span>skip to top</span></a></li> </ul> </div> ~~~ ~~~ CSS #skiptop { grid-area: main-content / main-nav; position: relative;} .scroll-top-wrapper { position: absolute; top: 100vh; right: 0.25rem; bottom: -5em; width: 3em; pointer-events: none; display: inherit; grid-template-rows: inherit;} .scroll-top_link { position: fixed; position: sticky; pointer-events: all; top: calc(100vh - 5rem); display: inline-block; text-decoration: none; font-size: 2rem; line-height: 3rem; text-align: center; width: 3rem; height: 3rem; border-radius: 50%; padding: 0.25rem; border: 1px solid #254568; background-color: #d6e3f0; transition: transform 80ms ease-in;} Damit habe ich zwar meinen gewünschten Effekt, aber durch das 100vh wird das Grid-Raster nach unten hin überschritten. Warum ist das so? ~~~ Der Link zur betroffenen Seite ist immer-noch: [Testseite V10A](http://misanthrop.bplaced.net/test/public/Testseite-V10a.html) So lieber Felix. soviel zu Deinem Einzeiler, jetzt trete mal in Aktion. Aber auch an anderen, bitte ich um Unterstützung. ich möchte mal voran kommen. Grüße der einsiedelde
nicht angemeldet nicht angemeldet
