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」のオプション設定が必要。リファレンスはこちら。
関連記事
-
-
JavaScriptにてHTML文字列をDOMノードに変換する方法
先日jQueryにて$.parseHTML()を用いてHTML文字列をDOMノー ...
-
-
Leafletのマップ状況をブラウザに保存し、再表示時に復元する「Leaflet.RestoreView」の利用方法
Leafletのマップ状況をブラウザ(cookie等)に保存し、ページリロード時 ...
-
-
JavaScriptの変数宣言であるvar / let / constの使い分けについて
JavaScript関連の調べ物をしていた際、変数の宣言時にvarではなくlet ...
-
-
JavaScriptで三項演算子の中に三項演算子
既存のソースを作り変えている際によく分からないソースがあった。 だいぶ書き換えて ...
-
-
JavaScriptでフォームのバリデート時に便利な「validator.js」ライブラリの利用方法
JavaScriptでフォームのバリデートを行う際、「半角英数字 正規表現」等で ...