滚动在 chrome 上以错误的偏移量开始，但在 firefox 上工作正常

Question

我正在尝试为我的网站导航添加平滑滚动，但我很难弄清楚为什么滚动首先以错误的偏移量开始然后正确移动。

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

这是我处理导航锚上点击事件的方式：

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

这是我尝试导航到网站中的 "about section" 时在控制台中得到的内容。

Website demo

Answer 1

浏览器也会为你滚动，你应该做的是停止传播并防止事件默认：

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

滚动在 chrome 上以错误的偏移量开始，但在 firefox 上工作正常

Scrolling starts at the wrong offset on chrome but works fine on firefox

javascript

jquery

html

scroll

smooth-scrolling