jQueryがロードしたスクロール可能なモーダルコンテンツが常に上にスクロールすることを確認するにはどうすればよいですか？

Question

私はAJAXを介して動的コンテンツを呼び出すために使用するBoostrapモーダル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; 
} 

は、私は（右find以下）コードに.scrollTop(0)を追加しようと、それは動作しませんでした。

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