JavaScript实现无动画滚动：解决window.scrollTo默认平滑滚动问题

出现平滑滚动的核心原因通常是全局CSS中设置了scroll-behavior: smooth，该属性会默认给所有滚动行为附加平滑过渡效果，哪怕调用window.scrollTo(0,0)未指定行为参数也会生效。

解决方案1：显式配置scrollTo参数 #

scrollTo支持传入配置对象，显式指定behavior为auto即可强制使用无过渡的立即滚动，覆盖全局CSS的配置：

window.scrollTo({
  top: 0,
  left: 0,
  behavior: 'auto'
})

解决方案2：直接修改滚动位置属性 #

直接对滚动容器的scrollTop属性赋值，本身不会触发任何滚动动画，兼容性更好：

// 适配PC端主流浏览器
document.documentElement.scrollTop = 0;
// 兼容部分移动端/老旧浏览器的body滚动逻辑
document.body.scrollTop = 0;

解决方案3：临时修改全局滚动行为（非必要不推荐） #

如果有特殊场景需要，也可以临时修改scroll-behavior属性，滚动完成后再复原：

document.documentElement.style.scrollBehavior = 'auto';
window.scrollTo(0, 0);
// 预留浏览器执行滚动的时间后复原配置
setTimeout(() => {
  document.documentElement.style.scrollBehavior = '';
}, 100);

内容的提问来源于stack exchange，提问作者Денис Линник