JQuery滚动到Bootstrap模态框顶部

Question

我目前正在使用 Bootstrap 模态框插件在我设计的网站上展示长篇法律信息，但问题是如果你打开一个模态框然后再打开另一个，第二个模态框将会滚动到第一个模态框的位置。因此，我正在寻找一种使用 JS/JQuery 将 div 滚动到顶部的方法。这是我目前正在使用的代码:

HTML:

请提供要翻译的内容。

<!--MODAL-->
<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="modalTitle"></h3>
</div>
<div id="modal-content" class="modal-body">
</div>
<div class="modal-footer">
<button id="modalPrint" class="btn btn-info hidden-phone" onClick=''>Print</button>
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>

JavaScript：

function openModal(heading, url) {
    $.ajax({
    url: url,
    cache: false
    }).done(function( html ) {
    $("#modal-content").html(html);
    $("#modalTitle").html(heading);
    $('#modalPrint').attr('onClick', 'loadPrintDocument(printCookies, {attr : "href", url : '+ url +', showMessage: false, message: "Please wait while we create your document"})');
    $('#modal').modal('show');
    $("#modal-content").scrollTop(0);
    });
}

您可以看到，我已经尝试在模态框显示后滚动到顶部。有什么想法吗？

- Adi Bradfield

Answer 1

现在使用Bootstrap 3，事件已经发生了变化，可以通过以下方式实现（加上平滑动画到顶部）

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

- antonio-gomez

---

看起来我得升级到新的Bootstrap，如果你能做那样的事情！ - Adi Bradfield

在这种情况下最好不要有动画，这样模态框一打开就已经滚动到顶部了，因为从用户的角度来看，它是一个完全不相关的新模态框。 - pimlottc

请注意（假定批准的答案是正确的），事件名称和要滚动的对象都已更改（模态框div本身与模态框内容div）。 - pimlottc

由于某些原因，只有引用模态框的ID（即#modal），而不是类（即.modal）时，这才起作用。 - thathurtabit

Answer 2

好的，我已经回答了自己的问题。对于其他遇到这个问题的人，只需在您的JS中添加此函数即可！

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

我会保留这个问题，因为我没有找到类似的问题（如果有的话），它可能会对某些人有帮助。

- Adi Bradfield

---

在 shown 上执行可能会导致演示不够流畅，建议在 hide 上执行。 - Phil Andrews

这是一个类。.modal-content - Rohit Agre

Answer 3

在Bootstrap 4（v4.0.0-alpha.6）中，以下内容对我非常有效：

$('#Modal').show().scrollTop(0);

请注意，从bootstrap-4.0.0-beta.1和Firefox 56.0.1开始，这似乎不能正常工作；我检查了IE11、MS Edge和Chrome，这些浏览器运行正常。

- BernardV

Answer 4

在Bootstrap 4中，以下内容对我有效：

$('.modal-body').scrollTop(0);

您需要在modal-body上执行scrollTop操作，因为父元素(modal、modal-dialog和modal-content)是容器，不会随用户滚动。

如果您更喜欢更平滑的移动方式，可以尝试使用动画效果：

$('.modal-body').animate({scrollTop: 0},400);

- Nick

---

感谢您提供这个优雅的解决方案和解释 - 我曾经为其他答案苦苦挣扎，感到沮丧 - 这个'.animated'升级在Bootstrap v5.1.0中按预期工作 - 谢谢。 - Mark

Answer 5

Bootstrap 发生了变化，你需要使用：on shown.bs.modal

当模态窗口显示时调用函数（我选择了这种方法）

<button onclick="showSMSSummary(); return false;" 
data-toggle="tooltip" title="Click To View Summary" 
class="btn btn-primary btn-sm">SMS Summary</button>

function showSMSSummary()
{
   $('#HelpScreenModalContent').modal('show');            
   $('#HelpScreenModal').animate({ scrollTop: 0 }, 'fast');
}

- Bortus

Answer 6

1. 滚动到顶部的按钮类名为：.page-scroll

2. Modal with a class of: .modal

3. JS to make scroll happen with the modal (JS could be simplified):

   $('body').on('click', '.page-scroll', function(event) {
       var $anchor = $(this);
       $('html, body, .modal').stop().animate({
           scrollTop: $($anchor.attr('href')).offset().top
       }, 1500, 'easeInOutExpo');
       event.preventDefault();
   });
   

- user1040259

Answer 7

在fadeIn中使用ScrollTop bootbox modal 答案就在这个问题中。

当设置bootbox对话框时，在结尾处添加.off("shown.bs.modal");。

bootbox.dialog({ ... }).off("shown.bs.modal");

打开对话框时，它将滚动到顶部。

- Stephanie