如何实现点击按钮时瞬间跳转至页面顶部而非平滑滚动？

下面是几种无需平滑滚动、瞬间跳转的实现方案：

• 方法1：用window.scrollTo()强制无平滑效果
  给按钮绑定点击事件，调用window.scrollTo()时显式指定behavior: 'auto'，不管全局有没有设置平滑滚动，都能强制瞬间跳转：

const backToTopBtn = document.getElementById('back-to-top');
backToTopBtn.addEventListener('click', () => {
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: 'auto' // 关键：禁用平滑滚动
  });
});

如果不需要兼容极老浏览器，也可以简化成window.scrollTo(0, 0)，默认就是瞬间跳转的。

• 方法2：锚点链接配合禁用平滑滚动
  如果用的是<a href="#top">这类锚点，想避免平滑滚动可以这样处理：

  • CSS全局禁用：给html元素设置scroll-behavior: auto，覆盖可能存在的全局平滑配置：

  html {
    scroll-behavior: auto !important;
  }
  

  • JavaScript拦截默认行为：直接阻止锚点的默认平滑跳转，手动设置滚动位置：

  const topAnchor = document.querySelector('a[href="#top"]');
  topAnchor.addEventListener('click', (e) => {
    e.preventDefault(); // 阻止锚点的默认平滑行为
    window.scrollTo(0, 0); // 瞬间跳转到顶部
  });
  

• 方法3：直接修改滚动位置（最简写法）
  不需要任何额外配置，直接设置滚动条位置为0，绝对瞬间：

document.documentElement.scrollTop = 0;
// 兼容部分旧浏览器的写法：
document.documentElement.scrollTop || document.body.scrollTop = 0;

把这段代码绑定到按钮的点击事件即可。

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