Scroll-Bereich eines Buttons innerhalb einer Grid-Area
bearbeitet von
Lieber einsiedler,
für diesen back-to-top-Button eignet sich [`position:fixed`{:.language-css}](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Ausrichtung/position#position:_fixed) (verlinkte Seite zeigt genau Deinen Anwendungsfall), oder [`position:sticky`{:.language-css}](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Ausrichtung/position#position:_sticky), womit man Elemente beim Scrollen sozusagen an einer bestimmten Stelle „festhalten“ kann.
Was dieses `<div class="scroll-top">...</div>`{:.language-html} 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 { ... }`{:.language-css}. Mir will auch nicht einleuchten, warum Du hier dermaßen Elemente verschachtelst und dabei mit Klassen (und einer ID) um Dich wirfst:
~~~ html,bad
<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:
~~~ html,good
<a href="#skip-to-top" id="scroll-top">skip to top</a>
~~~
Liebe Grüße
Felix Riesterer