Rolagem de ancora vai pro lugar errado

Olá pessoal do fórum.

Preciso de ajuda em um bug que não estou entendendo. Fiz um site com todo o conteúdo em uma só página, cada página do menu, desce rolando até o certo ponto. Mas pela primeira vez, sempre vai pro lugar errado, na maioria das vezes a página rola pra baixo da parte que deveria. Queria a ajuda de vocês pra descobrir o que esta acontecendo.

Código do javascript:

 $(window).load(function() {
 function filterPath(string) {
 return string
 .replace(/^\//,'')
 .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
 .replace(/\/$/,'');
 }
 $('a[href*=#]').each(function() {
 if ( filterPath(location.pathname) == filterPath(this.pathname)
 && location.hostname == this.hostname
 && this.hash.replace(/#/,'') ) {
 var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
 var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
 if ($target) {
 var targetOffset = $target.offset().top;
 $(this).click(function() {
 $('html, body').animate({scrollTop: targetOffset}, 1500);
 return false;
 });
 }
 }
 });
 });

Código html do menu:

<nav id="menu">
<ul>
<li>
<img id="logo" src="logo-menu.png" alt="logo" width="100px"/>
</li>
<li>
<a href="#topo">Home</a>
</li>
<li>
<a href="#sobre">Sobre</a>
</li>
<li>
<a href="#portfolio">Portfólio</a>
</li>
<li>
<a href="#servicos">Serviços</a>
</li>
<li>
<a href="#rodape">Contato</a>
</li>
</ul>
</nav>

A paginas estão linkadas pelo 'id'. São articles, sections, divs e footers.