Nachfolgend ein praktisches JavaScript Widget mit dessen Hilfe man Seitenweit einen ScrollOffset für Anker-Links definieren kann. Gemeint ist damit, dass man beim Klick auf einen Anker-Link nicht Pixelgenau am Beginn des jeweiligen Elements landet, sondern der Browser ein paar Pixel davor stoppt. Praktisch ist dies, wenn z.B. ein fixierter Header genutzt wird. Im Snippet wird die Höhe des Offsets von der Höhe des Headers abgeleitet und 20px dazu gerechnet. Den Header-Container müsst Ihr im Code also noch selbst definieren.
$(function() {
headerScrollOffset = $('#masthead').height() + 20;
$('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 - headerScrollOffset
}, 200);
return false;
}
}
});
});
Foto von Lucas Sankey auf Unsplash
