Tutorial Smooth Scroll mit jQuery

Gefunden auf: css-tricks.com. Der Einbau ist denkbar einfach.

Fügt die Verlinkung zur jQuery-Datei und das Skript einfach in die HTML des Layouts (auf einer Seite) oder des Master-Rahmens (auf allen Seiten) ein.

> Layout oder Master-Rahmen markieren > Fenster Layout-Eigenschaften oder Master-Rahmen-Eigenschaften > Button HTML > Zwischen Head Tags

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});
</script>

Die obige JavaScript-Funktion ist so aufgebaut, dass sie auf alle “Anker” Verweise reagiert. Ein Anker ist ein Link, der auf das vorangestellte Raute-Zeichen des verlinkten Anker-Namens reagiert.

Der “Anker” sieht dann z.B. so aus ...

<a name="Forum"></a>

... und der dazu passende Link dann so:

<a href="#Forum">zu unserem NOF-Forum</a>

In NOF setzt man einen Anker in einem Textfeld im Fenster “Text-Eigenschaften”

Anker setzen

Viel Spaß!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik