Anchor links with fixed header leads to strange results
Hello,
I have a one page site that has a fixed header with anchor links in the nav. The first time I click the anchor link the page smooth scrolls to the correct place, but after that is when things get weird.
-
After the page has initially scrolled to the section I want, if I click the same link again in the fixed header, the page scrolls all the way to the top.
-
After the page has initially scrolled to the section I want, if I click a different link it then goes to a spot that isn't the actual anchor that I am targeting. It seems that the offset is being measured off the view port and not the actual size of the page.
I'm using a standard implementation of Slidebars version 2.0.2.
Here is the smooth scrolling code that I am using (from CSS Tricks, of course).
$('a[href*="#"]:not([href="#"])').click(function() {
var pageHeight = {
height : $(document.body).height()
};
var height = pageHeight.height;
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) {
if(height < 4000) {
$('[canvas="container"]').animate({
scrollTop: target.offset().top
}, 1000);
} else {
$('[canvas="container"]').animate({
scrollTop: target.offset().top
}, 4000);
}
return false;
}
}
});
Hey you already got a solutions? Because I have the same problem.