scrollIntoView方法在极简场景下完全失效，恳请帮忙排查代码问题

常见失效原因及修复方式 #

• 系统/浏览器动画设置限制：Windows、macOS、移动端系统如果开启了「减少动画/关闭过渡效果」的无障碍选项，会强制覆盖页面内所有平滑滚动逻辑，变为瞬间跳转，该限制优先级高于页面代码，无法通过前端配置修改。
• CSS滚动配置冲突：如果html、body标签被设置了scroll-behavior: auto，或者溢出规则为overflow: hidden，也会导致平滑滚动失效。你可以在CSS中主动添加如下配置指定全局滚动行为：

html, body {
  scroll-behavior: smooth;
}

• 第三方插件劫持：部分浏览器插件（如篡改猴脚本、广告拦截工具、滚动增强插件）会劫持页面滚动逻辑，你可以在浏览器无痕模式下打开页面测试，排除插件干扰。
• 浏览器版本不兼容：scrollIntoView的behavior: smooth参数支持版本为Chrome 61+、Firefox 36+、Safari 15.4+，如果使用低于上述版本的浏览器，该配置不会生效，默认表现为瞬间跳转。
• 嵌套滚动容器配置缺失：如果是在自定义嵌套滚动容器内触发滚动，需要给对应的滚动容器单独设置scroll-behavior: smooth才会生效。

兜底兼容方案 #

如果排查完上述问题仍无法生效，或者需要兼容低版本浏览器，可以使用手动实现的平滑滚动逻辑替换原生API：

document.querySelector('button').addEventListener('click', function () {
  const targetEl = document.querySelector('.jump-place');
  // 计算目标元素相对于文档顶部的偏移量
  const targetOffset = targetEl.getBoundingClientRect().top + window.pageYOffset;
  const startOffset = window.pageYOffset;
  const scrollDistance = targetOffset - startOffset;
  const duration = 600; // 滚动总时长可自定义
  let startTime = null;

  function scrollAnimation(currentTime) {
    if (startTime === null) startTime = currentTime;
    const elapsedTime = currentTime - startTime;
    const run = easeFn(elapsedTime, startOffset, scrollDistance, duration);
    window.scrollTo(0, run);
    if (elapsedTime < duration) requestAnimationFrame(scrollAnimation);
  }

  // 缓动函数，模拟原生平滑滚动效果
  function easeFn(t, b, c, d) {
    t /= d / 2;
    if (t < 1) return c / 2 * t * t + b;
    t--;
    return -c / 2 * (t * (t - 2) - 1) + b;
  }

  requestAnimationFrame(scrollAnimation);
})

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