Chrome页面刷新后滚动条未置顶，如何用JS/HTML控制滚动位置？

核心原因 #

Chrome默认会保存页面刷新前的滚动位置并自动恢复，哪怕你用overflow: hidden隐藏了滚动条，这个机制依然会影响文档的滚动位置，导致页面加载时不在顶部。

具体解决方案 #

方法1：JavaScript组合方案（推荐） #

通过禁用浏览器的滚动恢复机制，再强制页面加载时滚动到顶部，彻底解决问题：

// 关闭Chrome的滚动位置自动恢复功能
history.scrollRestoration = "manual";

// 页面DOM加载完成后，强制滚动到顶部
window.addEventListener('DOMContentLoaded', () => {
  window.scrollTo(0, 0);
});

// 额外监听页面刷新前的事件，提前重置滚动位置
window.addEventListener('beforeunload', () => {
  window.scrollTo(0, 0);
});

方法2：HTML内联写法（简单快捷） #

如果不想单独写JS文件，直接在<body>标签里添加内联事件：

<body onload="window.scrollTo(0,0); history.scrollRestoration='manual';">

注意事项 #

因为你用了overflow: hidden隐藏滚动条，常规的滚动条控制可能不直观，但Chrome的滚动恢复是作用于整个文档的，所以必须先禁用scrollRestoration，再强制滚动到顶部，才能消除这个视觉bug。

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