vorige Präsentation: Fixe Kopfzeile mit Animation | zurück zum Buch-Kapitel [esc] | Nächste Präsentation Dynamisches Formular
Das Ziel dieser Übung ist: Wenn ein “interner” Link, ein Link zu einer Textmarke in derselben Seite, angeklickt wird, dann soll das Fenster langsam zur Zielposition scrollen, so dass man besser nachvollziehen kann dass der Link innerhalb der Seite erfolgte.
Links innerhalb einer Seite können auf jede id in der Seite verweisen.
In folgendem Beispiel verweist der dritte Link im Navigationsmenü
auf die <section> mit der id order:
<nav>
<ul>
<li><a href="#hero">Home</a></li>
<li><a href="#menu">Speisekarte</a></li>
<li><a href="#order">Online Bestellen</a></li>
<li><a href="#guest">Gästebuch</a></li>
<li><a href="#newsletter">Newsletter</a></li>
<li><a href="#contact">Kontakt</a></li>
</ul>
</nav>
....
<section id="order">
....
<footer id="contact">
Wird so ein interner Link angeklick, erfolgt die neue Darstellung der Seite blitzschnell. Es ist schwer zu erkennen, dass man sich nun nicht auf einer neuen, anderern Seite befindet, sondern einfach nur weiter unten auf derselben Seite.
Die Lösung: langsam scrollen.
html {
scroll-behavior: smooth;
}
Damit ist die Aufgabe erledigt.
Erst seit Jänner 2020 unterstützt auch Edge die css property scroll-behaviour.
Woher kann ich das wissen? Wie kann man damit umgehen?
Ein guter Startpunkt für diese Fragen ist die Webseite “can i use”. Hier kann man für verschiedene HTML, CSS, JavaScript Features nachlesen welche Browser dieses Feature unterstützen. In diesem Fall unter https://caniuse.com/css-scroll-behavior.
vorige Präsentation: Fixe Kopfzeile mit Animation | zurück zum Buch-Kapitel [esc] | Nächste Präsentation Dynamisches Formular
/
#