JQuery滚动到Bootstrap模态的顶部
我正在使用引导模式插件来显示我正在devise的网站上的长时间的法律信息，但问题是，如果你打开一个模式之后，第二个将已经滚动到第一个位置。 所以我正在寻找一种方法来滚动一个div与JS / JQuery的顶部。 这是我目前使用的代码：
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); }); }
正如你所看到的，我已经试图在显示模式之后滚动到顶端。 有任何想法吗？
现在使用bootstrap 3，事件发生了变化，可以这样做（加上顶部的平滑animation）
$('#modal').on('shown.bs.modal', function () { $('#modal').animate({ scrollTop: 0 }, 'slow'); });
好的，我已经回答了我自己的问题。 对于这个问题的其他人，只需将此函数添加到您的JS！
$('#modal').on('shown', function () { $("#modal-content").scrollTop(0); });
我将留下这个问题，因为没有一个类似的（我可以find），它可以帮助某人
- 向上滚动button有一个类： 。页面滚动
-
Modal与一类： .modal
-
JS使滚动发生与模式（JS可以简化）：
$('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(); });
在需要使用的助推器中有变化：在shown.bs.modal上
显示模式窗口时调用一个函数（我select了这个方法）
<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'); }
在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，这工作正常。
ScrollTop bootbox modal on fadeIn答案就是这个问题。
当设置bootbox对话框添加.off("shown.bs.modal"); 这在最后。
bootbox.dialog({ ... }).off("shown.bs.modal");
打开对话框时，它将滚动到顶部。
