如何用Vanilla JS实现非按钮onclick触发的window.scrollTo平滑滚动到类元素

当然可以实现！其实你完全不需要自己写定时器来模拟平滑滚动——现代浏览器已经原生支持这个特性了，咱们来一步步理清正确的做法。

先说说你现有代码的问题 #

你原来的代码是瞬间滚动到目标位置：

if(i <0) { window.scrollTo(0, document.querySelector(".site-header-wrapper").offsetTop); }

这确实能跳到目标位置，但没有平滑过渡效果。

而你尝试的代码逻辑走偏了：你给window添加了scroll事件监听器，这会导致每次用户滚动页面时都会触发你的定时器，反而会造成滚动行为混乱；而且你的定时器是让n不断递减，这会让页面往上滚动，但如果目标元素的offsetTop是正数（比如页面顶部下方的某个位置），这个逻辑完全反了，根本到不了目标位置。

正确的原生实现方法 #

方法1：使用window.scrollTo的平滑选项

现代浏览器支持给scrollTo传入配置对象，直接开启平滑滚动，这是最简单的方式：

if (i < 0) {
  // 先获取目标元素，避免找不到元素时报错
  const targetHeader = document.querySelector(".site-header-wrapper");
  if (targetHeader) {
    window.scrollTo({
      top: targetHeader.offsetTop, // 目标元素距离页面顶部的距离
      left: 0,
      behavior: 'smooth' // 关键：开启平滑滚动
    });
  }
}

这个方法兼容性很好，Chrome、Firefox、Edge都支持，Safari从15.4版本开始也支持。

方法2：使用element.scrollIntoView()（更简洁）

如果你不需要手动控制滚动的具体位置，直接让目标元素滚动到视口内，可以用这个方法，同样支持平滑选项：

if (i < 0) {
  const targetHeader = document.querySelector(".site-header-wrapper");
  if (targetHeader) {
    targetHeader.scrollIntoView({
      behavior: 'smooth',
      block: 'start' // 让元素顶部对齐视口顶部，和offsetTop的效果一致
    });
  }
}

这个方法的好处是不需要自己计算offsetTop，浏览器会自动处理，代码更简洁。

兼容性补充 #

如果需要兼容非常老的浏览器（比如Safari 15.3及以下），可以考虑用第三方平滑滚动库，或者手动实现定时器逻辑，但现在大部分场景下，原生的平滑滚动已经足够满足需求了。

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