打开一个内容很长的网页，滚动到中下部，按下F5刷新，你会发现有的网站停留在原位置，有的却回到了页面顶部。这种差异并非随机，而是由浏览器内置的滚动恢复机制以及开发者是否主动干预共同决定的。理解这套机制，才能稳定控制刷新后的显示位置。
浏览器在刷新页面时，默认会尝试恢复用户离开前的滚动位置。这一行为在Chrome、Firefox以及移动端Safari中表现明显，目的是减少用户重新定位内容的时间。但并非所有场景都希望这样：比如新闻文章页刷新后应该从标题开始，电商列表页刷新后回到顶部更符合预期。下面从原理到实践，详细拆解如何让网页刷新后始终从顶部开始显示。
浏览器默认的滚动恢复行为
浏览器历史记录中不仅保存了URL，还保存了每个会话的滚动坐标。当用户刷新页面时，渲染引擎会在文档加载完成后，尝试将滚动条恢复到之前记录的偏移量。这个机制在HTML规范中被称为滚动恢复，对应的接口是history.scrollRestoration。该属性有两个值：auto和manual。默认值为auto，表示浏览器自动恢复滚动位置；设置为manual后，浏览器不再自动介入，滚动位置的恢复完全交由开发者控制。
要查看当前页面的滚动恢复设置，可以直接在控制台输入以下代码：
// 查看当前滚动恢复模式 console.log(history.scrollRestoration); // 输出 auto 或 manual
需要注意的是，scrollRestoration属性并非所有浏览器都完整支持。IE11及更早版本完全不支持，Safari从10.1版本开始支持，而Chrome和Firefox的支持则比较完善。对于不支持该属性的浏览器，设置history.scrollRestoration = 'manual'不会产生任何效果，但通常也不会报错，因为给普通对象添加一个未知属性不会引发异常。因此在使用时建议配合特性检测。
使用 scrollRestoration 关闭自动恢复
最直接的思路就是告诉浏览器：不要自动恢复滚动位置，由我们手动处理。在页面的脚本中尽早设置history.scrollRestoration = 'manual'，可以让浏览器跳过默认的恢复流程。例如：
// 关闭浏览器自动滚动恢复
if ('scrollRestoration' in history) {
history.scrollRestoration = 'manual';
}
// 页面加载完成后强制滚动到顶部
window.addEventListener('load', function () {
window.scrollTo(0, 0);
});
上面的代码做了两件事：先判断浏览器是否支持scrollRestoration，如果支持就设置为manual；然后在load事件中调用window.scrollTo(0, 0)滚动到页面顶部。选择load事件而不是DOMContentLoaded是有原因的：DOMContentLoaded触发时图片、样式表等外部资源可能尚未加载完毕，此时文档高度还会变化，强制滚动到顶部后，浏览器可能因为后续布局调整再次改变滚动位置。而load事件在所有资源加载完成后触发，文档高度已经稳定，滚动操作更可靠。
如果不想依赖load事件，也可以使用window.onload或者setTimeout延迟执行。例如：
window.onload = function () {
// 延迟一帧确保布局完成
requestAnimationFrame(function () {
window.scrollTo(0, 0);
});
};
这里用requestAnimationFrame再包一层，是为了等待浏览器完成当前帧的渲染和布局计算。在移动端WebView或一些老旧浏览器中，直接调用scrollTo偶尔会因为布局未稳定而被忽略，增加一帧延迟可以有效规避这个问题。
设置manual模式有一个副作用：浏览器将不再处理前进和后退按钮时的滚动恢复。也就是说，用户点击后退回到上一页时，滚动位置也会丢失，除非你手动实现恢复逻辑。如果你的网站对前进后退的体验有要求，需要额外记录滚动位置并在popstate事件中恢复。对于大多数内容型页面来说，这个副作用可以接受，因为刷新后从顶部开始正是期望行为。
通过 URL 处理 hash 锚点影响
有时候即使设置了scrollRestoration = 'manual'并在load时调用了scrollTo(0, 0)，页面刷新后仍然可能不在顶部。一个常见原因是URL中带有hash锚点，例如https://ippipp.com/article#section-3。浏览器在解析URL时，会尝试滚动到hash对应的元素位置。如果hash元素在页面中不存在，浏览器通常不会滚动；但如果存在，滚动行为会优先于我们手动设置的scrollTo，导致页面定位到该元素而不是顶部。
解决这个问题有两种方式。第一种是在滚动到顶部之前清除URL中的hash，但保留路径和查询参数，避免触发浏览器的锚点定位。可以使用history.replaceState来替换当前URL：
// 移除URL中的hash部分，但保留路径和查询字符串
if (window.location.hash) {
var cleanUrl = window.location.pathname + window.location.search;
history.replaceState(null, '', cleanUrl);
}
window.scrollTo(0, 0);
注意replaceState的第三个参数如果传入相对路径或绝对路径都可以，但需要确保同源。上述代码使用pathname + search去掉了hash，页面URL会变成不带#的形式，浏览器就不会执行锚点定位。
第二种方式是手动处理hash滚动，但最终效果仍然是回到顶部。例如在load事件中先调用scrollTo(0, 0)，再调用history.replaceState清除hash。顺序很重要，因为清除hash本身不会触发滚动，但如果在清除之前浏览器已经因为hash完成了滚动，我们就能用scrollTo强制纠正。更稳妥的做法是两者结合：先清除hash，再延迟一帧滚动到顶部。
window.addEventListener('load', function () {
if (history.scrollRestoration) {
history.scrollRestoration = 'manual';
}
if (window.location.hash) {
history.replaceState(null, '', window.location.pathname + window.location.search);
}
requestAnimationFrame(function () {
window.scrollTo(0, 0);
});
});
需要提醒的是，如果你的网站是单页应用（SPA），使用hash路由时要格外小心。例如Vue Router的hash模式、React Router的HashRouter都依赖URL中的#来管理路由。此时清除hash会导致路由丢失，页面可能跳转到默认路由而不是保持当前视图。因此对于SPA，建议先确认路由模式，如果是history模式则可以安全清除hash；如果是hash模式，就不要用replaceState清除hash，而是通过路由守卫或生命周期钩子中调用滚动到顶部的逻辑。
CSS 的 overflow-anchor 与滚动锚定
除了浏览器主动恢复滚动位置外，还有一种情况会导致刷新后页面不在顶部：CSS的滚动锚定机制。滚动锚定是浏览器的一项优化功能，当视口上方的内容高度发生变化时（比如图片延迟加载、字体渲染完成、广告插入等），浏览器会尝试保持当前可视区域内容的稳定，从而改变滚动偏移量。这个行为由overflow-anchor属性控制，默认值为auto。设置为none可以禁用滚动锚定，让浏览器不再因为内容变化而调整滚动位置。
刷新页面时，如果文档中的图片使用懒加载，最初图片占位高度为0，图片加载完成后高度增加，浏览器会触发滚动锚定来保持用户之前看到的文本位置不变。这可能导致即使我们调用了scrollTo(0, 0)，页面也会被向下推一些距离。对于希望刷新后严格从顶部开始的场景，可以在全局样式中禁用滚动锚定：
html {
overflow-anchor: none;
}
不过需要注意，全局禁用滚动锚定会影响所有动态内容变化时的滚动稳定性。比如在页面上方动态插入一条通知栏，用户正在阅读的内容会向下跳动，体验较差。一个折中的方案是只在需要从顶部开始的页面（如文章详情页、列表页）对根元素设置overflow-anchor: none，并配合scroll-behavior: auto禁用平滑滚动，避免平滑滚动动画干扰位置判定。
另外，scroll-behavior属性虽然主要影响程序化滚动的动画效果，但当页面刷新时，如果CSS中设置了scroll-behavior: smooth，调用window.scrollTo(0, 0)可能会触发平滑滚动动画，导致在动画尚未完成时用户看到页面中间状态。对于强制回到顶部，建议使用scrollTo(0, 0)并确保scroll-behavior为auto，或者使用window.scrollTo({ top: 0, left: 0, behavior: 'instant' })。注意behavior: 'instant'在部分浏览器中不被识别，会回退到默认的自动行为，因此更简单的做法是直接使用不带选项对象的scrollTo(x, y)形式。
总结与最佳实践
要让网页刷新后始终从顶部开始显示，最完整的方案是组合使用以下步骤：在脚本头部设置history.scrollRestoration = 'manual'关闭浏览器自动恢复；在load事件中清除URL中的hash（如果存在）；调用requestAnimationFrame包裹window.scrollTo(0, 0)确保布局稳定；同时根据需要决定是否在CSS中设置overflow-anchor: none和scroll-behavior: auto。
实际开发中可以根据项目复杂度选择其中一部分。对于传统多页网站，仅需设置scrollRestoration并配合load事件滚动即可。对于带hash的页面，要记得处理hash清除。对于使用懒加载或动态插入内容的页面，考虑禁用滚动锚定。对于SPA，则需要在路由切换逻辑中统一处理滚动位置，而不是依赖浏览器刷新行为。
测试时建议使用无痕模式或禁用缓存，因为浏览器缓存策略可能影响资源加载时序。同时在不同浏览器和设备上验证，尤其是移动端Safari和微信内置浏览器，它们对滚动恢复的处理有细微差别。掌握这些细节后，就能稳定控制刷新后的页面初始显示位置，避免用户被带到意想不到的位置。
滚动位置scrollRestoration页面刷新修改时间：2026-08-21 10:57:09