如何防止Bootstrap modal关闭时页面自动向上滚动？

完全可以实现，页面上滚基本是两类原因导致，对应修复即可：

• 第一类是当前用的<a>标签触发的默认锚点跳转问题，和modal的toggle/hide方法本身无关
• 第二类是Bootstrap内置的焦点回溯、滚动位置重置逻辑触发的自动滚动

第一步：修复关闭按钮的默认行为问题 #

你现在用的<a>标签如果没设置正确的href属性（比如写了href="#"或者空href），点击时会默认触发锚点跳转到页面顶部，这是最常见的诱因，两种改法选一个就行：

1. 直接阻止a标签的默认跳转行为：

<a href="javascript:void(0)" onclick="$('.modal').modal('hide');return false;">Close</a>

2. 更推荐语义化写法，用<button>标签代替a标签做关闭按钮，从根源避免锚点跳转问题：

<button type="button" onclick="$('.modal').modal('hide')">Close</button>

第二步：修复Bootstrap内置逻辑导致的滚动 #

如果改完按钮还是存在上滚问题，对应你用的Bootstrap版本加修复代码即可：

Bootstrap 3.x 版本 #

3.x版本存在模态框关闭后重置滚动位置的已知问题，监听模态框事件手动保存、恢复滚动位置即可：

// 全局绑定所有模态框的关闭事件
$('.modal').on('hide.bs.modal', function () {
  // 先记录当前页面的垂直滚动位置
  const currentScrollTop = $(window).scrollTop();
  // 等模态框完全关闭后，把滚动位置还原
  $(this).one('hidden.bs.modal', function () {
    $(window).scrollTop(currentScrollTop);
  });
});

Bootstrap 4/5 版本 #

高版本默认已经修复了大部分滚动bug，如果仍有上滚，基本是焦点回溯逻辑导致的——模态框关闭后会默认把焦点还给触发模态框的按钮，如果这个按钮不在当前视口范围内，浏览器会自动滚动到按钮位置，初始化模态框的时候关掉焦点回溯即可：

$('.modal').modal({
  focus: false
})

如果是手动触发关闭的场景，也可以在关闭前先把焦点移到当前视口内的元素，再执行关闭逻辑。

快速全局样式修复 #

如果不想写JS，也可以加一段CSS覆盖默认逻辑，适配大部分场景：

.modal {
  overflow-y: auto;
}
body.modal-open {
  overflow: hidden;
  padding-right: 0 !important;
}

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