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.