JavaScript如何实现直接滚动到页面顶部？不支持时如何快速滚动？

滚动慢的原因 #

目前主流浏览器支持scroll-behavior: smoothCSS属性，如果你的页面全局给<html>标签设置了该属性，调用window.scrollTo(0,0)时会默认触发平滑滚动动画，导致滚动耗时变长。

方案1：强制瞬间滚动（优先使用） #

给scrollTo传入配置对象，主动指定behavior为instant，会强制忽略全局的平滑滚动配置，直接瞬间到达顶部：

scrolltoTop = async () => {
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: 'instant'
  })
}

方案2：全兼容兜底实现 #

如果需要兼容IE、老版本移动端浏览器等不支持scrollTo对象语法的环境，直接修改滚动容器的scrollTop属性即可，无兼容性问题且瞬间生效：

scrolltoTop = async () => {
  // 同时赋值兼容不同浏览器的滚动载体差异
  document.documentElement.scrollTop = 0;
  document.body.scrollTop = 0;
}

快速滚动（非完全瞬间、有短过渡）的实现 #

如果需要保留滚动过渡效果但不想用默认的慢平滑动画，可以手动用requestAnimationFrame实现可控速度的滚动，兼容性好且速度可调：

scrolltoTop = async () => {
  const scrollUp = () => {
    const currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
    if (currentScroll > 0) {
      window.requestAnimationFrame(scrollUp);
      // 每次滚动剩余高度的1/2，滚动速度越来越快，总耗时极短
      window.scrollTo(0, currentScroll - currentScroll / 2);
    }
  }
  scrollUp();
}

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