如何確保jQuery加載的可滾動模態內容始終滾動回頂端？

我有一個Boostrap模態jQuery函數，我用它通過AJAX調用動態內容。模態也是可滾動的，並且具有固定的高度，所以有可能有人在模態內向下滾動，然後關閉它（通過底部的按鈕）。如何確保jQuery加載的可滾動模態內容始終滾動回頂端？

現在的問題是，當打開另一個模式時，它會在上一個模式被關閉的同一位置打開，這意味着可能位於底部，這對用戶來說是令人困惑的。

是否有一種簡單的方法可以讓內容頂部的模態總是打開（焦點？）？這裏是我的功能：

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），並沒有工作。

來源

2016-10-01 user1996496

'position：absolute'和'top：0'對於主模態div呢？ –

@timenomad謝謝，剛剛嘗試過。它扭曲的模式一直到右側，並沒有解決問題:( – user1996496

嘗試使用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(); 
       } 
     }); 
}

來源

2016-10-01 19:58:22 MysterX

試過，不幸的是，它使得模式不能打開。在控制檯中沒有錯誤消息:( – user1996496

如何確保jQuery加載的可滾動模態內容始終滾動回頂端？

回答

相關問題