关闭Bootstrap Modal后无法将滚动条移动到页面顶部如何解决

问题原因 #

你遇到的滚动条回弹问题主要由3个常见错误和Bootstrap的内置特性导致：

• 选择器错误：你的模态框实际id是mymodal，但代码中使用$("#modal")选择器，导致模态框关闭逻辑可能没有按预期执行
• 参数拼写错误：window.scrollTo的配置项标准写法是美式拼写behavior，你写的behaviour会导致平滑滚动配置失效
• Bootstrap模态框的无障碍特性：Bootstrap 3的模态框关闭后会默认将焦点返还给触发它打开的按钮，当按钮位于页面底部时，浏览器为了让获得焦点的元素处于可视区域，会自动滚动回按钮所在位置，这是回弹的核心原因

解决方案 #

按照优先级可以选择以下方案修复：

方案1：修正基础错误+处理焦点冲突 #

首先修正选择器、参数拼写，然后在模态框完全关闭的hidden.bs.modal事件中执行滚动，同时主动移除当前焦点元素的焦点，避免浏览器自动滚动：

// 先修正你的AJAX代码
$.ajax({
  url: "", // 注意jQuery ajax的url参数为小写
  success: function(data) {
    if (data.iscorrect) {
      $("#mymodal").modal("hide"); // 修正模态框选择器
    }
  }
});

// 单独监听模态框完全关闭事件
$("#mymodal").on("hidden.bs.modal", function () {
  // 移除当前获得焦点的元素（通常是触发模态框的按钮）的焦点
  document.activeElement.blur();
  // 执行滚动到顶部
  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });
});

方案2：禁用模态框自动返还焦点特性 #

如果方案1仍然有问题，可以在初始化模态框时直接关闭Bootstrap的自动返还焦点特性：

// 初始化模态框时添加focus: false配置
$("#mymodal").modal({
  backdrop: true,
  keyboard: true,
  focus: false // 仅Bootstrap 3.3.0及以上版本支持
});

方案3：兜底延迟执行 #

如果以上方案都不符合你的场景，可以用极短的延迟确保Bootstrap所有内置逻辑执行完毕后再滚动：

$("#mymodal").on("hidden.bs.modal", function () {
  setTimeout(() => {
    window.scrollTo({
      top: 0,
      behavior: "smooth"
    });
  }, 10);
});

额外注意：如果你的模态框触发按钮是带href="#"的a标签，需要在按钮的点击事件中添加e.preventDefault()，避免锚点导致的页面滚动。

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