Fork me on GitHub

Web Development

Ein Lehrbuch für das Informatik oder Medien-Informatik Studium.

ToDo fertig stellen

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'

      ...
    }
  }); 

Position der Textmarke errechnen

$(hash).offset().top

Animation des Fensters

   $("html,body").animate({scrollTop: pos}, 800);