点击锚点链接导致scrollTop值异常（全浏览器）

核心问题分析 #

1. 重复绑定滚动事件：每次点击锚点都会调用monitorScrolling()，这会给window重复绑定多个scroll事件处理函数。多个函数同时修改lastScrollTop，导致滚动逻辑彻底混乱，这就是控制台出现异常curScrollTop值的根本原因。
2. lastScrollTop未初始化：代码中没有给lastScrollTop设置初始值，首次触发滚动时会出现逻辑判断错误。
3. 动画滚动误判为用户手动滚动：jQuery的animate平滑滚动会频繁触发scroll事件，原逻辑会把动画过程中的滚动当成用户手动滚动，导致头部状态反复切换（闪现/消失）。

修复步骤与代码示例 #

1. 初始化变量并避免重复绑定

将滚动监听逻辑放在页面初始化时仅绑定一次，同时初始化lastScrollTop和动画状态标志位：

$(document).ready(function(){
    // 初始化变量
    let lastScrollTop = $(window).scrollTop();
    let isAnimating = false;

    // 仅绑定一次滚动监听
    monitorScrolling();

    // 锚点平滑滚动逻辑
    $('a[href^="#"]').click(function(e){
        // 阻止默认锚点跳转行为
        e.preventDefault();
        let divid = this.hash;
        isAnimating = true; // 标记动画开始

        $('html,body').animate({
            scrollTop: $(divid).offset().top - 80
        }, 1000, function(){
            // 动画结束后重置标记
            isAnimating = false;
            // 更新lastScrollTop为最终滚动位置，避免后续判断异常
            lastScrollTop = $(window).scrollTop();
        });
    });

    function monitorScrolling(){
        $(window).scroll(function(){
            // 动画过程中跳过滚动逻辑处理
            if(isAnimating) return;

            let curScrollTop = $(window).scrollTop();
            console.log('cur '+curScrollTop+' last '+lastScrollTop);

            // 处理滚动方向，优化class操作（避免覆盖原有class）
            if (curScrollTop > lastScrollTop + 10) { // 增加阈值减少抖动
                // 向下滚动
                $('#header-container').addClass('header-container-off').removeClass('header-container-on');
                $('#desktop-menu').addClass('desktop-menu-top').removeClass('desktop-menu');
                lastScrollTop = curScrollTop;
            } else if (curScrollTop < lastScrollTop - 10) { // 增加阈值减少抖动
                // 向上滚动
                $('#header-container').addClass('header-container-on').removeClass('header-container-off');
                $('#desktop-menu').addClass('desktop-menu').removeClass('desktop-menu-top');
                lastScrollTop = curScrollTop;
            }
        });
    }
});

2. 关键优化点说明

• 阻止默认锚点行为：添加e.preventDefault()避免浏览器默认的锚点跳转干扰平滑动画。
• 动画状态标记：用isAnimating区分手动滚动和动画滚动，动画过程中跳过头部状态切换逻辑。
• 优化class操作：使用addClass/removeClass替代attr('class', ...)，防止覆盖元素上的其他自定义class。
• 滚动阈值优化：将原有的±10调整为判断条件的阈值，减少因滚动抖动导致的头部频繁切换。

控制台异常值解释 #

之前日志中出现的cur 1259 last 90是因为锚点动画直接设置了目标滚动位置，触发scroll事件时lastScrollTop还是之前手动滚动的旧值，而重复绑定的多个scroll监听又互相修改lastScrollTop，导致后续出现cur 102 last 1249这种完全混乱的数值，修复重复绑定后即可解决该问题。

内容的提问来源于stack exchange，提问作者Derek N