Rolagem de ancora vai pro lugar errado

[Alessandro Bodão 0]

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.