Bootstrap 3.3.7模态框打开时页面跳转至顶部问题求助

嘿，我之前也踩过Bootstrap 3模态框触发时页面突然跳顶部的坑，结合你的情况，给你几个实测有效的解决方案：

最常见的原因：锚点默认行为触发 #

Bootstrap模态框的触发按钮如果用了href="#modalId"的写法，浏览器会默认执行锚点跳转——即使模态框是fixed定位，页面也会滚动到模态框元素的位置，看起来就像跳回了顶部。

方案1：修改触发按钮的属性 #

直接去掉href或者把它改成javascript:void(0)，只保留data-toggle和data-target就能正常触发模态框，还不会触发锚点跳转：

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  打开模态框
</button>
<!-- 或者保留href但禁用跳转 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" href="javascript:void(0)">
  打开模态框
</button>

方案2：用JS阻止默认跳转行为 #

如果不想改HTML结构，就用jQuery绑定点击事件，阻止锚点的默认行为：

// 绑定所有模态框触发按钮
$('[data-toggle="modal"]').on('click', function(e) {
  e.preventDefault(); // 阻止锚点跳转
  var modalTarget = $(this).data('target');
  $(modalTarget).modal('show'); // 手动触发模态框
});

如果你的模态框是动态生成的（比如通过AJAX加载的内容），记得用事件委托：

$(document).on('click', '[data-toggle="modal"]', function(e) {
  e.preventDefault();
  var modalTarget = $(this).data('target');
  $(modalTarget).modal('show');
});

额外说明：你之前的CSS方案为什么没用 #

你试的body.modal-open { overflow: visible; }是用来解决模态框打开时页面无法滚动的问题，和页面跳顶部的问题完全不相关，所以没效果是正常的哦。

内容的提问来源于stack exchange，提问作者C Alonso C Ortega