本教程旨在解决网页在表单提交或重定向后，浏览器自动滚动到页面底部而非顶部的常见问题。我们将深入探讨 window.history.scrollrestoration 属性，并演示如何将其设置为 'manual' 来阻止这种不必要的自动滚动行为，确保页面加载后始终定位在顶部，从而提升用户体验并消除视觉闪烁。
理解页面自动滚动问题
在现代Web开发中，用户体验至关重要。一个常见的用户体验痛点是，当用户在一个长页面（例如包含页脚表单的页面）上提交表单或触发页面重定向后，浏览器可能会自动将页面滚动到用户提交表单前的滚动位置，而非页面的顶部。这种行为，尤其在Chrome等浏览器中较为普遍，可能导致用户感到困惑，并需要手动滚动回顶部，影响操作流畅性。
开发者有时会尝试使用 window.scrollTo(0, 0) 或 document.documentElement.scrollTop = 0 等方法来强制页面滚动到顶部。然而，这些方法通常在浏览器执行其默认的滚动恢复行为之后才生效，这会导致页面先短暂地滚动到底部，然后再快速跳回顶部，产生不美观的“闪烁”效果。
解决方案：使用 window.history.scrollRestoration
为了优雅地解决这个问题，我们可以利用 History API 中的 scrollRestoration 属性。这个属性允许开发者控制浏览器在历史记录导航（例如前进、后退、重定向或刷新）时如何恢复滚动位置。
scrollRestoration 属性有两个可能的值：
- 'auto' (默认值): 浏览器会自动恢复用户在页面上的滚动位置。这是导致上述问题的原因。
- 'manual': 浏览器将不会自动恢复滚动位置。这意味着页面加载后，滚动条会停留在默认的顶部位置（0,0），除非有其他脚本明确指示其滚动。
通过将 scrollRestoration 设置为 'manual'，我们可以在浏览器尝试自动滚动之前就阻止其默认行为，从而彻底消除闪烁。
实现步骤
要阻止页面在重定向或加载后自动滚动，只需在您的HTML页面的
标签中添加以下JavaScript代码：
防止页面重定向后自动滚动到底部
页面顶部内容
这里是页面的主要内容区域。当用户在长页面上操作后，浏览器可能会自动将滚动条恢复到用户上次离开的位置。
例如，如果您在页面底部填写了一个表单并提交，页面重定向或刷新后，浏览器可能会自动将您带回到底部表单的位置。
通过设置 window.history.scrollRestoration = 'manual';，我们可以阻止这种默认的自动滚动行为，确保页面加载后始终位于顶部。
这里是页面底部上方的额外内容，确保页面足够长。
将这段代码放置在
标签中，确保它在页面渲染和浏览器执行任何默认滚动行为之前被执行。注意事项
- 浏览器兼容性： window.history.scrollRestoration 是一个相对较新的API，但现代主流浏览器（如Chrome, Firefox, Safari, Edge）均已良好支持。在极少数需要支持老旧浏览器的场景中，可能需要考虑备用方案（例如在 DOMContentLoaded 后强制滚动到顶部，但会存在闪烁）。
-
适用场景： 此方法特别适用于以下场景：
- 表单提交后页面重定向或刷新，希望用户从页面顶部开始浏览新内容。
- 导航到新页面时，总是希望页面从顶部开始，而不是记住上一个页面的滚动位置。
- 单页应用 (SPA) 中，虽然通常通过路由控制滚动，但如果存在全页面刷新或外部链接跳转，此设置依然有效。
- 与 window.scrollTo(0, 0) 的区别： scrollRestoration = 'manual' 的优势在于它从根本上阻止了浏览器的自动滚动行为，避免了先滚动再跳回顶部的视觉闪烁。而 window.scrollTo(0, 0) 只是在浏览器完成其默认行为后进行修正，可能导致不佳的用户体验。
总结
通过简单地设置 window.history.scrollRestoration = 'manual'，我们可以有效地控制浏览器在页面加载或重定向时的滚动行为，确保页面始终从顶部开始展示。这不仅提升了用户体验，消除了不必要的视觉闪烁，也使开发者能够更好地掌控页面的初始状态。在需要精确控制页面滚动位置的Web应用中，这是一个简洁而强大的解决方案。
