单击锚链接呈现不正确的scrollTop值（所有浏览器）

Question

我正在构建一个页面，该页面的标题在向下滚动时隐藏在视图之外（负 TOP 值），在向上滚动时返回视图。那里没有问题，工作正常。我的页面上还有一个菜单，其中包含锚链接，可以平滑滚动到页面的不同部分。

我遇到的问题是，当单击锚链接时，[隐藏]标题会很快跳回到视图中，并立即返回到其隐藏位置。 （它应该被隐藏，因为单击锚链接会导致我们向下滚动页面。）

编辑：当单击锚链接导致向上滚动时，它也会执行此操作；即标题应该在视图中，但是当单击锚链接时，它会暂时跳出视图，然后弹出回来。

为了调试，我记录了控制台

$(window).scrollTop()

的“之前/之后”值，标记为“

curScrollTop

”和“

lastScrollTop

”。这些是我们用来相互比较的值，以确定我们是向上还是向下滚动。有趣且令人沮丧的是，当单击锚链接时，“

curScrollTop

”值突然变成一个荒谬的、不正确的值 - 我相信这就是导致标题瞬间跳回视图的原因.

有人遇到过这个问题吗？更好的是，为什么会发生这种情况以及如何解决或解决这个问题？

$(document).ready(function(){

        //do smooth scrolling when anchor links are clicked
    $('a[href^=#]').click(function(){
        let divid=this.hash;
        $('html,body').animate({scrollTop: $(divid).offset().top-80}, 1000);
                //subtract 80 from $(divid).offset().top to put div where we want it

                monitorScrolling();

    });

});


function monitorScrolling()
{
    $(window).scroll(function(){
        let curScrollTop = $(window).scrollTop();
        console.log('cur '+curScrollTop+' last '+lastScrollTop);
        if (curScrollTop > lastScrollTop)
        {
        //scrolling down
        $('#header-container').attr('class','header-container-off');
        $('#desktop-menu').attr('class','desktop-menu-top');
        lastScrollTop=curScrollTop-10; //subtract 10 to handle "bounce" on mobile devices
        }
        else
        {
        //scrolling up
        $('#header-container').attr('class','header-container-on');
        $('#desktop-menu').attr('class','desktop-menu');
        lastScrollTop=curScrollTop+10; //add 10 to handle "bounce" on mobile devices
        }
      });

}

以下是控制台中记录的值：

//Here we have scrolled down a bit so that our header is now hidden
cur 1 last 0
cur 13 last -9
cur 24 last 3
cur 37 last 14
cur 66 last 27
cur 78 last 56
cur 88 last 68
cur 95 last 78
cur 99 last 85
cur 100 last 89
//Anchor link was clicked, smooth-scrolling down to appropriate div - incorrect values!!!!
cur 1259 last 90
cur 102 last 1249
cur 104 last 112
cur 112 last 114
cur 117 last 122
cur 125 last 127
cur 139 last 135

我玩过一些数字（重置scrollTop等）但总是相同的结果。

Answer 1

您还没有告诉浏览器不要使用

preventDefault()

;

执行通常会执行的操作

$('a[href^="#"]').click(function(e){
  e.preventDefault();
  let divid=this.hash;
  $('html,body').animate({scrollTop: $(divid).offset().top-80}, 1000);
  //subtract 80 from $(divid).offset().top to put div where we want it
});

https://jsfiddle.net/d2zexbn7/