OnePager mit skip-to-top-Link bearbeitet von Matthias Scharwies 10.04.2024 06:09 Guten Morgen,@JürgenB ich habe im [Tutorial Komfort-Version](https://wiki.selfhtml.org/wiki/OnePager/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 Wochenende2. [**Variante mit Skip-to-Top-Link**](https://wiki.selfhtml.org/wiki/OnePager/Komfort-Version#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!~~~ JavaScript const topLink = document.gquerySetElemenctByIdor('#skip-to-top'); const nav = document.querySelector('nav'); let observer = new IntersectionObserver(function (entries) { entries.forEach(function (entry) { if (!entry.isIntersecting) { topLink.style.dhisplaydden = 'bfalock'se; } else { topLink.style.dhisplaydden = 'nontrue'; } }); }, { threshold: [0] }); observer.observe(nav);~~~Mist: Grad gemerkt, dass ich `threshold` nicht erklärt habe (wird zwar weiter oben gemacht) - interner Link wird am Wochenende nachgereicht.Könntest du / könntet ihr mal drüberschauen, ob euch noch was auffällt?@einsiedler Schau dir das [LiveBeispiel ](https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Komfort-OnePager-1.html) an, 1. Der Skip-to-Top-link ist Teil des Headers:~~~ HTML <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:~~~ CSSmain { position: relative;} #skip-to-top { display: none; 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üßeMatthias Scharwies-- Die Signatur findet sich auf der Rückseite des Beitrags.
OnePager mit skip-to-top-Link bearbeitet von Matthias Scharwies 10.04.2024 14:29 Guten Morgen,@JürgenB ich habe im [Tutorial Komfort-Version](https://wiki.selfhtml.org/wiki/OnePager/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 Wochenende2. [**Variante mit Skip-to-Top-Link**](https://wiki.selfhtml.org/wiki/OnePager/Komfort-Version#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:~~~ JavaScript const topLink = document.getElementById('skip-to-top'); const nav = document.querySelector('nav'); let observer = new IntersectionObserver(function(entries) { entries.forEach(function(entry) { if (!entry.isIntersecting) { topLink.style.display = 'block'; } else { topLink.style.display = 'none'; } }); }, { threshold: [0] }); observer.observe(nav);~~~Mist: Grad gemerkt, dass ich `threshhold` nicht erklärt habe (wird zwar weiter oben gemacht) - interner Link wird am Wochenende nachgereicht.KönntesTt du / könntet ihr mal drüberschauen, ob euch noch was auffällt?@einsiedler Schau dir das [LiveBeispiel ](https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Komfort-OnePager-1.html) an, 1. Der Skip-to-Top-link ist Teil des Headers:~~~ HTML <header> <a id="backlink" href="#willkommen"><img src="logo.svg" alt="Willkommen"></a> <a href="#willkommen" id="skip-to-top">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:~~~ CSSmain { position: relative;} #skip-to-top { display: none; 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);}~~~Wie gesagt, Das Beispiel mit den Vor- und Zurück-Pfeilen kommt später. *Stay tuned!*Herzliche GrüßeMatthias Scharwies-- Die Signatur findet sich auf der Rückseite des Beitrags.
OnePager mit skip-to-top-Link bearbeitet von Matthias Scharwies 10.04.2024 06:21 Guten Morgen,@JürgenB ich habe im [Tutorial Komfort-Version](https://wiki.selfhtml.org/wiki/OnePager/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 Wochenende2. [**Variante mit Skip-to-Top-Link**](https://wiki.selfhtml.org/wiki/OnePager/Komfort-Version#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:~~~ JavaScript const topLink = document.getElementById('skip-to-top'); const nav = document.querySelector('nav'); let observer = new IntersectionObserver(function(entries) { entries.forEach(function(entry) { if (!entry.isIntersecting) { topLink.style.display = 'block'; } else { topLink.style.display = 'none'; } }); }, { threshold: [0] }); observer.observe(nav);~~~Mist: Grad gemerkt, dass ich `threshhold` nicht erklärt habe (wird zwar weiter oben gemacht) - interner Link wird am Wochenende nachgereicht.KönntesT du / könntet ihr mal drüberschauen, ob euch noch was auffällt?@einsiedler Schau dir das [LiveBeispiel ](https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Komfort-OnePager-1.html) an, 1. Der Skip-to-Top-link ist Teil des Headers:~~~ HTML <header> <a id="backlink" href="#willkommen"><img src="logo.svg" alt="Willkommen"></a> <a href="#willkommen" id="skip-to-top">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:~~~ CSSmain { position: relative;} #skip-to-top { display: none; 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);}~~~Wie gesagt, Das Beispiel mit den Vor- und Zurück-Pfeilen kommt später. *Stay tuned!*Herzliche GrüßeMatthias Scharwies-- Die Signatur findet sich auf der Rückseite des Beitrags.
OnePager mit skip-to-top-Link bearbeitet von Matthias Scharwies 10.04.2024 06:15 Guten Morgen, @JürgenB ich habe im [Tutorial Komfort-Version](https://wiki.selfhtml.org/wiki/OnePager/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**](https://wiki.selfhtml.org/wiki/OnePager/Komfort-Version#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: ~~~ JavaScript const topLink = document.getElementById('skip-to-top'); const nav = document.querySelector('nav'); let observer = new IntersectionObserver(function(entries) { entries.forEach(function(entry) { if (!entry.isIntersecting) { topLink.style.display = 'block'; } else { topLink.style.display = 'none'; } }); }, { threshold: [0] }); observer.observe(nav); ~~~ Mist: Grad gemerkt, dass ich `threshhold` nicht erklärt habe (wird zwar weiter oben gemacht) - interner Link wird am Wochenende nachgereicht. @einsiedler Schau dir das [LiveBeispiel ](https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Komfort-OnePager-1.html) an, 1. Der Skip-to-Top-link ist Teil des Headers: ~~~ HTML <header> <a id="backlink" href="#willkommen"><img src="logo.svg" alt="Willkommen"></a> <a href="#willkommen" id="skip-to-top">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: ~~~ CSS main { position: relative; } #skip-to-top { display: none; 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); } ~~~ Wie gesagt, Das Beispiel mit den Vor- und Zurück-Pfeilen kommt später. *Stay tuned!* Herzliche Grüße Matthias Scharwies -- Die Signatur findet sich auf der Rückseite des Beitrags.
nicht angemeldet nicht angemeldet
