勉強したことのメモ

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

sweetalert2を閉じた後、指定位置にスクロールしようとしても元の位置に戻る現象を解決する方法

  JavaScript

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

  関連記事

jQueryで同サーバ内のCSVを読み込み、配列やオブジェクトとして取り扱う方法
jQueryで同サーバ内のCSVを読み込み、配列やオブジェクトとして取り扱う方法

先日バニラJavaScriptで同サーバ内のCSVを読み込み、配列として取り扱う ...

Leafletで「leaflet-control-geocoder」プラグインを導入して住所検索機能を追加する方法
Leafletで「leaflet-control-geocoder」プラグインを導入して住所検索機能を追加する方法

LeafletとOpenStreetMapでマップを表示させ、テキストボックスに ...

AjaxのJSONP使用でPHPで作った配列をJSに返す方法
AjaxのJSONP使用でPHPで作った配列をJSに返す方法

AというサイトからBというサイトにAjax通信し、Bの方ではMySQLに接続して ...

SNSのシェア(いいね)ボタンを設置できるjQueryプラグイン「jsSocials」の利用方法
SNSのシェア(いいね)ボタンを設置できるjQueryプラグイン「jsSocials」の利用方法

サイト内にSNSのシェア(いいね)ボタンを設置する際、WordPressだと何ら ...

JavaScriptでフォーム送信の際に禁止ワードのチェック及び制限をかける方法
JavaScriptでフォーム送信の際に禁止ワードのチェック及び制限をかける方法

掲示板等で本文を送信する際に予め定めていた禁止ワードが含まれていないかチェックし ...