モーダルウィンドウ表示時にウィンドウのスクロール位置をリセットする方法

モーダルウィンドウ内で「縦にスクロール→ウィンドウを閉じる→改めてモーダルウィンドウを開く」とスクロール位置はそのままの状態でウィンドウが開く。これをウィンドウを開く度にスクロール位置を一番上に戻したい(リセットしたい)。以下にサンプルと対応方法をメモ。

サンプル

https://taitan916.info/sample/modal_scroll/

通常版のモーダルウィンドウだとスクロール位置はそのままになるが、改良版の方はウィンドウを開く度にスクロール位置がリセットされる筈。

対応方法

ソースコード

<button class="modal_btn" data-id="1">通常版</button>
<button class="modal_btn" data-id="2">改良版</button>

<div id="modal_1" class="modal js-modal">
    <div class="modal-container">
        <div class="modal-close js-modal-close">×</div>
        <div class="modal-content">
            <p>通常版</p>
            <p>通常版</p>
            <p>通常版</p>
            <p>通常版</p>
            <p>通常版</p>
            <p>通常版</p>
            <p>通常版</p>
        </div>
    </div>
</div>

<div id="modal_2" class="modal js-modal">
    <div class="modal-container">
        <div class="modal-close js-modal-close">×</div>
        <div class="modal-content">
            <p>改良版</p>
            <p>改良版</p>
            <p>改良版</p>
            <p>改良版</p>
            <p>改良版</p>
            <p>改良版</p>
            <p>改良版</p>
        </div>
    </div>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function(){
    $(`.modal_btn`).on(`click`, function(){
        const data_id = $(this).data(`id`);
        $(`#modal_${data_id}`).addClass('is-active');

        //改良版の場合
        if( data_id == 2 ){

            //スクロール位置をリセットする
            $(`#modal_${data_id}`).find(`.modal-content`).scrollTop(0);
        }
    });
    $(`.modal-close`).on(`click`, function(){
        $(`.modal`).removeClass('is-active');
    });
})
</script>

解説等

以下でスクロール位置をリセットしている。

$(モーダルウィンドウ内のスクロールが発生する部分のセレクタ).scrollTop(0);

リファレンス

.scrollTop()

https://api.jquery.com/scrollTop/

その他

モーダルウィンドウ自体についてはこちらのページを参考にさせていただいた。