Le défilement commence au mauvais décalage sur chrome mais fonctionne bien sur Firefox

Question

J'essaye d'ajouter le défilement doux à ma navigation de site Web mais j'ai du mal à comprendre pourquoi le défilement commence d'abord au mauvais décalage puis se déplace correctement .

$(window).on("scroll", function() { 
     var scroll_start = window.scrollY; 
     console.log(scroll_start); 
     if (scroll_start > offset) { 
      navToLight(); 
     } else { 
      navToDark(); 
     } 
}); 

c'est comment je poignée cliquez sur les événements ancres nav:

$('a.nav-link').on('click', function() { 
    var target = $($(this).attr('href')).position().top; 
    console.log("This is the target: "+target); 
    $("html, body").animate({ 
     scrollTop: target 
    }, 700); 
}); 

ce que je reçois dans la console lorsque je tente de naviguer à la « section à propos de » sur le site.

Website demo

Answer 1

Le navigateur défile également pour vous, ce que vous devez faire est d'arrêter la propagation et preventDefault sur l'événement:

$('a.nav-link').on('click', function (e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    var target = $($(this).attr('href')).position().top; 
    console.log("This is the target: "+target); 
    $("html, body").animate({ 
    scrollTop: target 
    }, 700); 
});