如何確保jQuery加載的可滾動模式內容始終滾動回到頂部？

Question

我有一個Boostrap模態jQuery函數，可用來通過AJAX調用動態內容。 模態也是可滾動的，並且具有固定的高度，因此有人可能向下滾動模態然后關閉模態（通過底部的按鈕）。

現在的問題是，當另一個模態打開時，它在關閉前一個模態的同一位置打開，這可能是在底部，這會使用戶感到困惑。

是否有一種簡單的方法可以使模式始終在內容的頂部打開（焦點？）？ 這是我的功能：

function open_box(params)
  {                 
    dump(params);
      var URL=ajax_url+"/?"+params;

        var modal = $('#modal');
        modal
            .find('.modal-body')
            .load(URL, function (responseText, textStatus) {
                if ( textStatus === 'success' || 
                     textStatus === 'notmodified') 
                {
                    modal.modal("show");
                }
        });  
}

CSS是：

    .modal-content {
        overflow: auto;
    }

    .modal-dialog {
    width: calc(100% - 100px);
    margin: 100px auto;
    height: 85%;
    max-height: calc(100% - 100px);
    max-width: 550px;
}

我嘗試將.scrollTop(0)添加到代碼中（在find下方），但這沒有用。

Answer 1

嘗試使用HTML元素scrollIntoView() （ Docs ）的本機瀏覽器方法。 如果您知道element恰好是已加載的HTML中的頂部元素，則可以在顯示彈出窗口后嘗試調用element.scrollIntoView() 。 或者您可以確定已加載內容的第一個子項並將其滾動到頂部。 像這樣：

function open_box(params)
  {                 
    dump(params);
      var URL=ajax_url+"/?"+params;

        var modal = $('#modal');
        var modalBody = modal.find('.modal-body');
        modalBody
            .load(URL, function (responseText, textStatus) {
                if ( textStatus === 'success' || 
                     textStatus === 'notmodified') 
                {
                    modal.modal("show");
                    modalBody.get(0).children[0].scrollIntoView();
                }
        });  
}