JQuery 滾動到 Bootstrap Modal 的頂部

Question

我目前正在使用 bootstrap modal 插件在我正在設計的網站上顯示長長的法律消息，但問題是如果你一個接一個地打開一個模態，第二個將已經滾動到第一個的任何位置. 所以我正在尋找一種使用 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);
    });
}

如您所見，我嘗試在顯示模態后滾動到頂部。 有什么想法嗎？

Answer 1

現在使用 bootstrap 3，事件發生了變化，可以像這樣實現（加上頂部的平滑動畫）

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

Answer 2

好的，我已經回答了我自己的問題。 對於遇到此問題的其他人，只需將此功能添加到您的 JS 中即可！

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

我會留下這個問題，因為沒有類似的（我能找到的）並且它可能對某人有所幫助

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，這很好用。

Answer 4

1. 向上滾動按鈕有一個類： .page-scroll

2. 具有以下類別的模態： .modal

3. 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(); });

Answer 5

在 Bootstrap 4 中，以下對我有用：

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

您需要在模態主體上滾動頂部，因為父元素（模態、模態對話框、模態內容）是容器並且不會隨用戶滾動。

但是，如果您更喜歡不那么生澀的運動，請嘗試動畫路線：

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

Answer 6

您需要使用的 boostrap 發生了變化：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');
}

Answer 7

FadeIn 上的 ScrollTop bootbox modal答案就在這個問題上。

設置引導框對話框時添加.off("shown.bs.modal"); 這在最后。

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

打開對話框時它會滾動到頂部。