OnePager mit skip-to-top-Link

[Matthias Scharwies]

Guten Morgen,

@JürgenB ich habe im Tutorial Komfort-Version mal ein paar Kleinigkeiten geändert:

Oben wird eine Basic-Variante ohne JavaScript, aber bereits mit dem ScrollSnap aus dem vorherigen Kapitel vorgestellt.

Das Kapitel zum Intersection Observer ist um zwei Varianten bereichert:

1. Rechts links-Pfeile kommt leider erst am Wochenende
2. Variante mit Skip-to-Top-Link
   • Der fixed Header ist jetzt Teil der ersten section und wandert beim Scrollen nach oben.
   • Sobald die Navigation unsichtbar wird, soll ein Skip-To-Top-Link erscheinen, der nach oben zielt.

Ich habe bewusst Varianten genommen, damit das Final-Beispiel nicht alle möglichen JS-Snippets enthält. Fixed Header und Pfeil nach oben macht keinen Sinn.

Hier mein JS: [[EDIT]] neue Version!

	const topLink = document.querySelector('#skip-to-top');
	const nav = document.querySelector('nav');
	let observer = new IntersectionObserver(function (entries) {
		entries.forEach(function (entry) {
			if (!entry.isIntersecting) {
				topLink.hidden = false;
			} else {
				topLink.hidden = true;
			}
		});
	}, {
		threshold: [0]
	});
	observer.observe(nav);

Könntest du / könntet ihr mal drüberschauen, ob euch noch was auffällt?

@einsiedler Schau dir das LiveBeispiel an,

1. Der Skip-to-Top-link ist Teil des Headers:

    <header>
      <a id="backlink" href="#willkommen"><img src="logo.svg" alt="Willkommen"></a>
      <a href="#willkommen" id="skip-to-top" hidden >skip to top</a>
      <hgroup>
        <h1>Schreinerei Meier</h1>
        <p>ihre Werkstatt für gutes Wohnen!</p>
      </hgroup>
      <nav>
        <ul>
          <li aria-current="location"><a href="#willkommen">Willkommen</a></li>
          <li><a href="#preise">Preise</a></li>
          <li><a href="#produkte">Produkte</a></li>
          <li><a href="#kontakt">Kontakt und Impressum</a></li>
        </ul>
      </nav> 
    </header>

2. Das CSS könnte man ausbauen - die Positionierung ist aber trivial:

main {
	position: relative;
}	

#skip-to-top {
	position: fixed;
	bottom: 1em;
	right: 50%;
	background-color: var(--green-darker2);
	color: gold;
	padding: 1em 2em;
}

#skip-to-top:hover {
  background-color: var(--red-darker2);
}

[/EDIT]

Wie gesagt, Das Beispiel mit den Vor- und Zurück-Pfeilen kommt später. Stay tuned!

Herzliche Grüße

Matthias Scharwies