vorige Präsentation: Fixe Kopfzeile mit Animation | zurück zum Buch-Kapitel [esc] | Nächste Präsentation Responsive Images
Wenn ein “interner” Link, ein Link zu einer Textmarke in derselben Seite, angeklickt wird, dann soll das Fenster langsam zur Zielposition scrollen.
<nav>
<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>
</nav>
....
<section id="order">
....
<footer id="contact">
$("a").on('click', function(event) { if (this.hash !== "") { event.preventDefault(); var hash = this.hash; // z.B. '#order' ... } });
$(hash).offset().top
$("html,body").animate({scrollTop: pos}, 800);
vorige Präsentation: Fixe Kopfzeile mit Animation | zurück zum Buch-Kapitel [esc] | Nächste Präsentation Responsive Images
/
#