勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

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

  jQuery JavaScript

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

 

サンプル

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/

 

その他

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

 - jQuery JavaScript

  関連記事

FullCalendarでカレンダー内のイベントをクリックした際にタイトル以外の内容も表示させる方法

FullCalendarでカレンダー内のイベントをクリックした際にtitle以外 ...

jQueryで要素を移動する方法のまとめ

jQueryで要素を移動する際、insertBefore / insertAft ...

Lightboxで画像拡大時に閉じるボタンの位置を右上に変更

Lightbox(バージョン2.7.1)で画像拡大時に閉じるボタンの位置を右下か ...

ajaxのエラー詳細を取得する

success or errorで分岐処理はできるけど、 エラー詳細取れないの? ...

formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)

フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML ...