页面重载时如何执行window.scrollTo()？求非setTimeout替代方案

直接调用window.scrollTo()无效，大多是因为浏览器默认会恢复页面重载前的滚动位置，或者DOM未完全就绪导致滚动操作被覆盖。以下是不用setTimeout的可行方案：

1. 禁用浏览器自动滚动恢复 #

浏览器的history.scrollRestoration特性会在页面重载时自动恢复之前的滚动位置，这会直接覆盖你的滚动指令。将其设置为manual即可禁用该默认行为：

// 建议放在<head>内的脚本中，确保尽早执行
history.scrollRestoration = 'manual';
window.scrollTo(0, 200);

2. 监听DOMContentLoaded事件 #

如果滚动无效是因为DOM还未完全解析完成，可在DOM结构加载就绪后执行滚动操作：

document.addEventListener('DOMContentLoaded', () => {
  window.scrollTo(0, 200);
});

如果页面包含大量图片、视频等资源，需要等待所有资源加载完成再滚动的话，可以改用load事件：

window.addEventListener('load', () => {
  window.scrollTo(0, 200);
});

3. 滚动到指定元素（语义化方案） #

如果你的需求是滚动到页面中的某个特定元素，使用scrollIntoView会更直观，还能避免硬编码坐标的问题：

document.addEventListener('DOMContentLoaded', () => {
  // 替换为你的目标元素选择器
  document.querySelector('.target-element').scrollIntoView({
    block: 'start', // 让元素顶部对齐视口
    behavior: 'auto' // 可选'smooth'实现平滑滚动效果
  });
});

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