jQuery如何在同一函数中添加scroll-behavior样式后将其移除

你之前两次实现的失效，核心是误解了jQuery的队列执行规则：

• 第一版代码完全没有平滑效果，是因为delay() 是jQuery专门用于动画队列的控制方法，仅会对fx队列内的动画方法生效，.css() 是直接操作DOM属性的同步方法，根本不会进入队列等待执行。实际代码执行顺序为：
  1. 为html标签添加scroll-behavior: smooth样式
  2. 触发目标元素的scrollIntoView滚动
  3. 跳过所有delay等待流程，立刻将html的scroll-behavior样式清空
     平滑样式刚添加就被移除，浏览器直接执行无过渡的瞬间跳转，自然没有滚动效果。
• 第二版代码样式一直残留，是因为queue() 方法要求传入一个「待执行的回调函数」才能正确排队。你写的.queue(css('scroll-behavior', "")) 是当场执行了css()方法，把方法返回的jQuery对象塞入队列，完全没有把“移除样式”的动作排进执行队列，因此样式永远不会被主动清理，一直残留在html标签上。

按优先级从高到低推荐：

最优方案：跳过全局样式修改 #

你完全不需要给html标签添加全局的scroll-behavior，scrollIntoView原生支持单独给当前滚动操作配置平滑效果，从根源上避免“添加全局样式影响其他功能、后续需要手动清理”的问题：

document.querySelector("h2#clickScroll").scrollIntoView({
  behavior: "smooth",
  block: "start"
});

这种写法无全局副作用，不需要额外的样式增删逻辑，完全不会干扰站点其他滚动功能。

精准清理方案：基于scrollend事件判断滚动完成 #

如果业务场景必须通过给html加scroll-behavior实现平滑滚动，可以用浏览器原生的scrollend事件识别滚动完成的节点，不需要靠固定延迟时间估算，避免出现“滚动未结束就清样式导致跳帧”或者“样式残留过久影响其他操作”的问题：

// 定义滚动完成后的清理逻辑
const removeTempStyle = () => {
  document.documentElement.style.scrollBehavior = "";
  // 清理监听，避免重复触发
  document.removeEventListener("scrollend", removeTempStyle);
};

// 临时添加全局平滑样式
document.documentElement.style.scrollBehavior = "smooth";
// 绑定滚动完成事件
document.addEventListener("scrollend", removeTempStyle);
// 触发目标位置滚动
document.querySelector("h2#clickScroll").scrollIntoView();

兼容方案：适配老旧浏览器的延迟清理 #

如果需要适配不支持scrollend事件的旧浏览器，不要尝试把css操作塞进jQuery的delay队列，直接用原生setTimeout实现延迟清理即可：

// 临时添加全局平滑样式
$("html").css("scroll-behavior", "smooth");
// 从jQuery对象中取出原生DOM节点调用滚动方法（jQuery对象未原生适配scrollIntoView的标准行为）
const scrollTarget = document.querySelector("h2#clickScroll");
scrollTarget.scrollIntoView();
// 根据站点常见滚动距离设置合理延迟，到期后清理临时样式
setTimeout(() => {
  $("html").css("scroll-behavior", "");
}, 1200);

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