jQuery – 6 – Smooth Scrolling

Ihr wollt innerhalb einer Seite diverse Bereich mit Ankern verlinken oder auf langen Seiten (am Ende der Seite) per Klick wieder an den den Anfang gelangen? Um das ganze ein bisschen Schicker zu machen empfiehlt sich ein sanftes Scrolling. Also kein rapider Sprung .. sondern die Seite soll elegant an einem vorüber gleiten.

Ich hab das gerade spontan mit jQuery gebastelt:

$(document).ready(function() {
  $("a[href*=#]").click(function(){     
     var trgt = this.hash.slice(1);     
       if (trgt.length) {
         var x = $('a[name="'+trgt+'"]')
         var offset = x.offset().top;
         $('html,body').animate({scrollTop: offset}, 1000);
         return false;
       }
  });
});

Das Script matched auf alle A Tags im DOM die mit einem # (Hash) beginnen .. also z.b “a href=”#ziel” .. wenn ihr auf den Link klickt schnibbeln wir den “#” weg so das nur noch der Name des Ankers übrig bleibt (ziel) .. den kleben wir dann in den A NAME Tag rein .. und schauen mit dem “Offset” wo dieser sich in der Seite befindet (der Abstand von oben in Pixel) .. dann scrollen wir da mit einer kleinen Verzögerung hin ..

Leave a Reply

Your email address will not be published. Required fields are marked *