Ajax请求加载后因滚动位已达目标无法触发滚动动效的解决方法

问题原因 #

后续点击按钮不触发滚动动画的核心原因是：首次滚动完成后，页面scrollTop值已经和目标偏移量完全一致，jQuery的animate()方法检测到属性的起始值与结束值相同时，不会执行动画逻辑。

实现方案 #

不需要加加载gif，通过两段式滚动逻辑即可实现每次加载都有明确的更新感知：不管当前页面是否已经在目标位置，都先小幅向下滚动一小段距离制造微动提示，再平滑滚动回目标位置，强制每次请求完成后都完整触发滚动流程。
修改后的success回调代码如下：

success: function(data) {                       
    // 渲染加载完成的新内容
    $("#test").html(data).fadeIn("slow"); 
    
    // 计算最终目标滚动位置
    const targetScrollTop = $(scrolltarget).offset().top - 90;
    // 清空之前未执行完的滚动动画队列，避免多次快速点击导致动画乱序
    $('html , body').stop(true);

    // 第一段动画：先小幅向下滚动，制造内容更新的微动反馈
    $('html , body').animate({
        scrollTop: targetScrollTop + 30 // 数值为向下偏移量，可按需调整
    }, 150, function() {
        // 第二段动画：平滑滚动回最终目标位置，和首次加载体验对齐
        $('html , body').animate({
            scrollTop: targetScrollTop
        }, 450);
    });
    
    return false;                       
},

参数调整参考 #

• 向下偏移量：建议设置在20-40px区间，偏移太小用户无法感知，偏移过大容易产生页面晃动感
• 动画时长：第一段下滚建议设置100-200ms，快速微动更符合提示的感知逻辑；第二段回滚建议设置400-600ms，保持和首次加载一致的平滑感
• 提示强度：如果需要更强的更新提示，可以在第一段动画时给#test容器加一个极短的高亮样式，纯滚动方案已经可以满足基础的更新感知需求，不需要额外引入加载gif

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