当页面底部的订阅表单提交并跳转新页面时，Chrome 会默认恢复滚动位置（如停留在页脚），导致页面自动滚至底部；可通过设置 history.scrollRestoration = 'manual' 禁用该行为，实现跳转后保持顶部可视。
当页面底部的订阅表单提交并跳转新页面时，chrome 会默认恢复滚动位置（如停留在页脚），导致页面自动滚至底部；可通过设置 `history.scrollrestoration = 'manual'` 禁用该行为，实现跳转后保持顶部可视。
在现代 Web 开发中，尤其是单页应用或含长页面+页脚表单的营销站点中，一个常见却易被忽视的问题是：用户在页面底部（如页脚处的邮件订阅框）完成表单提交后，跳转至成功页（如 /thank-you）时，Chrome 浏览器会自动将视口滚动回原页面的相同垂直位置（即页脚区域）。这并非 JavaScript 主动触发，而是浏览器基于 history.scrollRestoration 的默认行为——Chrome 将其设为 'auto'，会在导航后尝试“恢复”上一页面的滚动偏移。
该问题在 Firefox 和 Safari 中通常不出现，具有明显的浏览器特异性（主要影响 Chrome 及基于 Chromium 的 Edge、Opera 等）。
✅ 正确解决方案：禁用滚动恢复
只需在 HTML 的
中添加一行脚本，全局关闭浏览器的自动滚动恢复机制：
<script>
if ('scrollRestoration' in window.history) {
window.history.scrollRestoration = 'manual';
}
</script>? 说明：
- scrollRestoration 是 History API 的标准属性（MDN 文档）；
- 设为 'manual' 后，所有导航（包括表单提交跳转、location.href 赋值、history.pushState() 后的前进/后退）均不再自动滚动；
- 页面加载完成后，滚动位置将保持在 0, 0（顶部），符合绝大多数用户体验预期。
⚠️ 注意事项与最佳实践
-
放置时机关键：必须在 内尽早执行（建议置于
之后、其他脚本之前），确保在首次导航前生效； - 无需监听页面加载事件：该设置是同步生效的，DOMContentLoaded 或 load 事件中设置已晚于首次滚动恢复；
- 兼容性良好：Chrome 46+、Edge 79+、Firefox 46+、Safari 15.4+ 均支持；旧版浏览器会忽略该属性，无副作用；
- 不干扰手动滚动控制：你仍可自由调用 window.scrollTo(0, 0) 或 element.scrollIntoView() 实现精准滚动，'manual' 仅禁用自动恢复；
- ❌ 避免错误方案：
- window.scrollTo(0, 0) 放在新页面 JS 中属于“补救式修复”，会导致肉眼可见的“先滚到底→再弹回顶部”的闪烁；
- preventDefault() 在表单提交时无法阻止跨页面跳转后的滚动恢复；
- CSS scroll-behavior: auto 对此无效——这是历史状态级行为，非 CSS 控制范围。
✅ 补充：服务端重定向场景也适用
即使表单使用 POST 提交至后端，由服务器返回 302 重定向（如跳转到 /thank-you），只要目标页 HTML 包含上述脚本，即可立即生效——因为滚动恢复发生在新页面加载初期，与请求方式无关。
总之，history.scrollRestoration = 'manual' 是语义清晰、零副作用、浏览器原生支持的标准解法。将其作为现代网站的必备初始化脚本之一，可显著提升跨浏览器一致性与用户视觉体验。
