jQuery animate控制Bootstrap模态框滚动到顶部失效，求可行解决方案

问题原因 #

你当前的代码操作的是页面根元素html的滚动位置，而Bootstrap模态框采用fixed定位，其内部滚动条属于模态框自身的独立容器，和页面全局滚动条完全隔离，因此修改全局滚动参数不会对模态框生效。

可行实现方案 #

1. 确定模态框滚动容器 #

Bootstrap模态框的滚动区域通常对应两个场景：

• 给模态框添加了.modal-dialog-scrollable类时，滚动区域为.modal-body
• 未加上述类、整个模态框内容滚动时，滚动区域为.modal-content

2. 基础滚动代码（带动画） #

将选择器替换为你的目标模态框对应的滚动容器即可，假设你的模态框id为myModal，示例如下：

// 滚动modal-body到顶部（适用带modal-dialog-scrollable的场景）
$('#myModal .modal-body').animate({ scrollTop: 0 }, 'slow');

// 滚动整个模态框内容到顶部（适用默认长内容模态框场景）
// $('#myModal .modal-content').animate({ scrollTop: 0 }, 'slow');

3. 模态框打开自动滚动到顶部 #

如果需要模态框每次弹出时自动回到顶部，绑定Bootstrap自带的shown.bs.modal事件即可，确保模态框完全渲染后再执行滚动操作：

$('#myModal').on('shown.bs.modal', function () {
  $(this).find('.modal-body').animate({ scrollTop: 0 }, 'slow');
})

4. 无动画直接滚动 #

如果不需要过渡动画，可以直接操作DOM的scrollTop属性，性能更高：

document.querySelector('#myModal .modal-body').scrollTop = 0;

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