sweetalert2を閉じた後、指定位置にスクロールしようとしても元の位置に戻る現象を解決する方法
sweetalert2で表示したウィンドウを閉じた後、指定位置にスクロールさせたい。ただ、そのまま書くと指定位置にスクロール後、元の位置に戻ってしまう。この点を改善させたい。以下に対応方法をメモ。
サンプル
https://taitan916.info/sample/sweetalert2/scroll/
ページ下部にボタンがあり「通常版」をクリック後、ウィンドウを閉じるとページ上部にスクロールするが、その直後元の位置に戻る筈。「改良版」だとその点が改善されている。
対応方法
ソースコード
<button id="alert" type="button" class="button-class">通常版</button> <button id="alert2" type="button" class="button-class">改良版</button> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.11.0/dist/sweetalert2.all.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.11.0/dist/sweetalert2.min.css" rel="stylesheet"> <script> document.getElementById(`alert`).onclick = function() { Swal.fire({ html: `通常版`, willClose: () => { window.scrollTo({ top: 0, }); } }); } document.getElementById(`alert2`).onclick = function() { Swal.fire({ html: `改良版`, returnFocus: false, willClose: () => { window.scrollTo({ top: 0, }); } }); } </script>
解説等
「returnFocus: false」のオプション設定が必要。リファレンスはこちら。
関連記事
-
-
「slick」でブラウザ幅がPCの場合はスライダーを表示し、スマホ幅の場合はスライダー無しにする方法
slickプラグインで画像スライダーを設置しているページがあり、PCのブラウザ幅 ...
-
-
jQueryでページ表示時にラジオボタンやチェックボックスにcheckedがついている場合にイベントを実行する方法
ラジオボタンやチェックボックスをチェックした際に、jQuery側で何らかのイベン ...
-
-
JavaScriptでメール送信を行える「EmailJS」の利用方法
お問い合わせフォーム等の記入内容をメールで送信する際、通常はPHP等サーバサイド ...
-
-
AjaxにてHTTPリクエストメソッドをDELETE / PUTで送信する方法
あるAPIにAjaxでリクエストする際、GET / POSTではなくDELETE ...
-
-
バニラJavaScriptのDOMContentLoadedとは?
jQuery等を用いない素のJSで書かれたプログラムを触る機会があり、そのソース ...