twitter-bootstrap-3 - 如何在 bootstrap3 中重置模态的滚动位置？

Question

我有一个bootstrap v3 modal，就像在文档中一样。

当我第一次打开模式（“启动演示模型”按钮）时，垂直滚动条位于顶部位置。如果我向下滚动并在模式中单击“取消”，它将关闭。没关系。但是，如果我再次打开模式，它将已经向下滚动。这是我想避免的情况。我应该怎么做才能在顶部打开模态？

Answer 1

在生产中工作

$('#my-modal').on('shown.bs.modal', function () {
    $('#my-modal').scrollTop(0);
});

Answer 2

我认为您需要使用打开模式时触发的事件来重置滚动。

就像是：

$('#myModal').on('shown.bs.modal', function () {
  window.scrollTo(0,0);
});

根据您的页面，您可能想要使用一些 jQuery 或动画：

$('#myModal').on('shown.bs.modal', function () {
 $('html, body').animate({
   scrollTop: $("#myModal").offset().top
 }, 1000);
});

Answer 3

我已经通过将焦点设置在我的模态的顶部输入元素上来解决它：

    $("#RuleDialog").on('shown.bs.modal', function() {
        $('#LinkedRuleName').focus();
    });

Answer 4

Bootstrap 3 模态

$modal.off('shown.bs.modal').on('shown.bs.modal', function() {
    if ($modal.scrollTop() > 0) {
        $modal.scrollTop(0)
    }
}

Answer 5

这是我如何使此功能正常工作的方法。首先设置 modal 的显示事件。

$(document).ready(function () {
    var modalMatrix = $('#modalMatrix');
    modalMatrix.on('shown.bs.modal', function () {
        modalMatrix.find('.modal-body').scrollTop(0); // This is important , for me the scrollbar is in the body of the modal .
    });
});

然后像往常一样显示模态。

$('#modalMatrix').modal('show');