モーダルウィンドウ表示時にウィンドウのスクロール位置をリセットする方法
モーダルウィンドウ内で「縦にスクロール→ウィンドウを閉じる→改めてモーダルウィンドウを開く」とスクロール位置はそのままの状態でウィンドウが開く。これをウィンドウを開く度にスクロール位置を一番上に戻したい(リセットしたい)。以下にサンプルと対応方法をメモ。
サンプル
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/
その他
モーダルウィンドウ自体についてはこちらのページを参考にさせていただいた。
関連記事
-
-
YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法
以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...
-
-
jQueryでループを抜けようと(breakしようと)するとエラーになる際の対応方法
jQueryでループを抜けようと(breakしようと)すると「Uncaught ...
-
-
formのpasswordとtextをjQueryで切り替える方法
formでtype="password"を指定していると内容を入力した際に「●● ...
-
-
jQueryからAjax経由でPHPにリクエストしCookieを操作する方法
先日PHPでCookie保存時にHttpOnly / Secure属性を設定する ...
-
-
jQueryにて複数のajax処理のレスポンスをまとめて表示する方法
同時にajax処理を行う際、挙動やコードの書き方に悩まされることが多い。例えばA ...