我怎样才能确保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();
                }
        });  
}