OnePager mit skip-to-top-Link
bearbeitet von
@@Matthias Scharwies
> ~~~ JavaScript
> const topLink = document.getElementById('skip-to-top');
> const nav = document.querySelector('nav');
> ~~~
Warum `document.getElementById()`{:.language-js}? Warum nicht einheitlich `document.querySelector()`{:.language-js}?
---
> ~~~ JavaScript
> if (!entry.isIntersecting) {
> topLink.style.display = 'block';
> } else {
> topLink.style.display = 'none';
> }
> ~~~
Besser:
~~~ JavaScript
topLink.style.display = !entry.isIntersecting ? 'block' : 'none';
~~~
oder andersrum
~~~ JavaScript
topLink.style.display = entry.isIntersecting ? 'none' : 'block';
~~~
Noch besser:
~~~ JavaScript,good
topLink.hidden = entry.isIntersecting;
~~~
mit `<a href="#willkommen" id="skip-to-top" hidden>skip to top</a>`{:.language-html} im Markup.
Wie of muss man das `hidden`-Attribut und seine [Vorteile](https://forum.selfhtml.org/self/2023/may/24/beliebige-tabellenzeilen-mit-details-schalten/1809003#m1809003) noch erwähnen, bis es Beachtung findet?
Kwakoni Yiquan
{:@art-x-kwejian}
--
*Ad astra per aspera*{:@la}