Problem with fixed header offsetting an html anchor

[Robin]

Hi All,

I’m having an issue with fixed header offsetting an html anchor. Please check the below URL.

http://codepen.io/rahuldsg/pen/ZGKmgy

$('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;
}
}
});

[Paulie_D]

Could you clarify exactly what the issue is.

Personally, I’d just grab the height of the header and offset by that much.

http://codepen.io/Paulie-D/pen/MwmZZX/

[Shikkediel]

And if it’s about the top anchor, you could add some padding or margin (with the same height as the header). Looks like that was done in the above example as well.

[Author]

Posts