Ankerlinks scrollen mit jQuery

Immer wieder wichtig, so gehts:

$(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 -80
        }, 500);
        return false;
      }
    }
  });
});

Link
Die -80 in der Zeile scrollTop: target.offset().top ist für den Fall gedacht, dass man einen fixed Header in Höhe von 80 Pixel hat. Der Zielpunkt liegt dann 80 Pixel oberhalb des Ankers.
Die 500 beschreiben die Scrollgeschwindigkeit in Millisekunden.

Ankerlink „von einer anderen Seite kommend“ scrollen

Will man den Scrolleffekt auch anwenden, wenn man von einer anderen Seite auf einen Ankerlink springt, kann man zusätzlich folgendes JS einbinden:

$('html,body').animate({
    scrollTop: $(window.location.hash).offset().top -80
},500);

Link
Zur Bedeutung der -80 und der 500 siehe oben.