页脚提交订阅表单跳转后自动滚到底部，如何阻止？

核心原因 #

跳转后自动滚动到页脚，几乎都是因为URL中带有锚点（比如#footer），浏览器会默认滚动到页面中ID与锚点匹配的元素位置。你之前用window.scrollTo(0,0)无效，是因为浏览器的锚点滚动执行时机早于你的代码，导致先滚到页脚再回到顶部，出现闪烁。

具体解决办法 #

• 移除URL中的锚点根源
  检查表单的action属性，如果里面带有#footer，直接去掉：

  <!-- 修改前 -->
  <form action="/submit-page#footer">
  <!-- 修改后 -->
  <form action="/submit-page">
  

  如果是后端返回跳转URL时带了锚点，修改后端逻辑，不要在跳转地址中添加#footer。

• 抢在浏览器滚动前阻止锚点行为
  如果没法修改URL，在目标页面的<head>中添加脚本，尽早执行以覆盖浏览器的默认滚动：

  document.addEventListener('DOMContentLoaded', function() {
    // 检查URL是否带有目标锚点
    if (window.location.hash === '#footer') {
      // 替换URL移除锚点，不修改历史记录
      history.replaceState(null, null, window.location.pathname);
      // 强制滚动到顶部
      window.scrollTo({ top: 0, behavior: 'instant' });
    }
  });
  

  用DOMContentLoaded比load事件更早触发，能避免滚动闪烁；behavior: 'instant'确保滚动瞬间完成。

• 手动提交表单避免锚点
  如果表单是在当前页面提交，可通过JS阻止默认提交行为，手动发起请求后跳转：

  const footerForm = document.querySelector('footer form');
  footerForm.addEventListener('submit', function(e) {
    e.preventDefault();
    // 收集表单数据
    const formData = new FormData(this);
    // 手动提交请求
    fetch(this.action, {
      method: this.method,
      body: formData,
      credentials: 'include' // 保留登录状态，根据需要调整
    }).then(res => {
      // 跳转时不带锚点
      window.location.href = this.action;
    }).catch(err => {
      console.error('提交失败:', err);
    });
  });
  

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