本文旨在解决用户在提交表单后，页面重定向时浏览器自动滚动到底部的问题。通过设置 `window.history.scrollrestoration = 'manual'`，开发者可以阻止浏览器在页面加载或刷新时自动恢复滚动位置，从而实现对页面滚动行为的精确控制，提升用户体验，避免不必要的底部跳转。
页面重定向后的自动滚动问题
在网页开发中，用户提交表单（例如在页脚订阅框中填写信息）后，页面经常会重定向到新的页面或刷新当前页面。此时，部分浏览器（尤其是 Chrome）可能会尝试“恢复”之前的滚动位置，导致页面自动滚动到提交表单时的位置，即页脚。这通常会给用户带来困扰，因为他们可能期望页面加载后显示顶部内容，而不是再次停留在页脚。
开发者有时会尝试使用 window.scrollTo(0, 0) 或 document.documentElement.scrollTop = 0 等方法来强制页面滚动到顶部。然而，这种方法可能存在时序问题，即浏览器先自动滚动到底部，然后 JavaScript 代码才执行滚动到顶部的操作，造成页面闪烁或不连贯的用户体验。
浏览器滚动恢复机制
现代浏览器为了提升用户体验，通常会内置一种“滚动恢复”机制。当用户从一个页面导航到另一个页面，然后又返回时，浏览器会尝试将页面滚动到用户离开时的位置。这种机制在某些场景下非常有用，但在像表单提交重定向这种特定情况下，它可能与开发者的预期行为相悖。当页面重定向时，浏览器可能会错误地将前一个页面的滚动位置（例如页脚）应用到新加载的页面上。
解决方案：使用 window.history.scrollRestoration
JavaScript 提供了 window.history.scrollRestoration 属性，允许开发者控制浏览器在导航时如何处理滚动位置。通过将此属性设置为 'manual'，我们可以阻止浏览器在页面加载或刷新时自动恢复滚动位置，从而获得对页面滚动行为的完全控制。
scrollRestoration 属性有两个可选值：
- 'auto' (默认值): 浏览器会自动恢复页面的滚动位置。
- 'manual': 浏览器不会自动恢复滚动位置，开发者需要通过 JavaScript 手动控制滚动。
要解决页面重定向后自动滚动到底部的问题，只需在页面的
页面重定向示例
页面顶部内容
这是页面的主要内容区域。
请向下滚动，直到看到页脚的表单。
继续向下滚动...
将上述
注意事项与总结
- 放置位置： 务必将 window.history.scrollRestoration = 'manual'; 放在 标签内，越早执行越好，以确保在浏览器尝试自动滚动之前就设置好。
- 浏览器兼容性： scrollRestoration 属性在现代浏览器中支持良好（包括 Chrome, Firefox, Safari, Edge）。不过，主要解决的问题多发于 Chrome 浏览器。
- 后续控制： 如果在阻止自动滚动后，您需要将页面滚动到特定的位置（例如，表单提交成功后的提示信息处），您仍然可以使用 window.scrollTo() 或其他 JavaScript 滚动方法在页面加载完成后进行精确控制。
- 用户体验： 在某些场景下，浏览器默认的滚动恢复是有益的。因此，在使用 manual 模式时，请确保这符合您的用户体验设计，并在必要时提供自定义的滚动逻辑。
通过简单地设置 window.history.scrollRestoration = 'manual'，开发者可以有效解决页面重定向后自动滚动到底部的常见问题，提升用户在表单提交等交互场景下的体验，确保页面以预期的状态呈现。
