html设scroll-behavior:smooth时jQuery scrollTop动画前跳动如何修复

页面跳动是两套平滑滚动机制冲突导致的：
你给html设置的scroll-behavior: smooth是浏览器原生的平滑滚动能力，和jQuery animate 方法实现的自定义时长滚动是两套独立的触发逻辑。点击滚动按钮时，原生平滑滚动会先响应scrollTop的初始变化做一次位置调整，紧接着jQuery的动画逻辑才开始执行，就会出现先跳一下、再正常滚动的异常表现。

不需要删除全局的scroll-behavior: smooth配置（避免影响其他场景下的原生平滑滚动体验），只需要在jQuery执行滚动动画的周期内，临时关闭原生平滑滚动，动画结束后再恢复即可。

修改后的JavaScript代码如下：

$('.scroll-btn').click(function(e) {
  e.preventDefault();
  const targetTop = $(".scrolled-div").offset().top - 104;
  const $html = $('html');

  // 临时关闭原生平滑滚动，消除冲突
  $html.css('scroll-behavior', 'auto');

  $('html, body').animate({
    scrollTop: targetTop
  }, 'slow', function() {
    // 动画执行完成后恢复原生平滑滚动配置
    $html.css('scroll-behavior', 'smooth');
  });
});

注意事项 #

• 必须在animate的完成回调里把scroll-behavior改回smooth，否则全局原生平滑滚动会永久失效
• 不要遗漏e.preventDefault()：如果滚动按钮是<a>锚点标签，不加这句会提前触发原生锚点滚动，依然会出现跳动
• 动画时长参数可以自由替换，不管是slow、fast还是自定义毫秒数值，都不会再出现前置跳动问题

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