Scroll-Bereich eines Buttons innerhalb einer Grid-Area

[Felix Riesterer]

Lieber einsiedler,

für diesen back-to-top-Button eignet sich position:fixed (verlinkte Seite zeigt genau Deinen Anwendungsfall), oder position:sticky, womit man Elemente beim Scrollen sozusagen an einer bestimmten Stelle „festhalten“ kann.

Was dieses <div class="scroll-top">...</div> angeht, so stellt sich die Frage, ob Du mehrere solcher Buttons anbieten möchtest, damit sich eine Klasse hier lohnt. Mein Verdacht ist aber, dass Du stattdessen besser mit einer ID hantieren solltest: #scroll-top { ... }. Mir will auch nicht einleuchten, warum Du hier dermaßen Elemente verschachtelst und dabei mit Klassen (und einer ID) um Dich wirfst:

<div class="scroll-top">
  <ul id="skiptop-label" class="scroll-top_link">
    <li><a href="#skip-to-top"><span>skip to top</span></a></li>
  </ul>
</div>

Es genügt dieses Markup hier vollkommen:

<a href="#skip-to-top" id="scroll-top">skip to top</a>

Liebe Grüße

Felix Riesterer