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でTOPへ戻る機能(ボタン)の作成方法
ページ内をある程度スクロールするとTOPへ戻るリンクを表示させたかった。ただ、複 ...
-
-
ローソク足のグラフをJavaScriptで描写する方法(highstock)
株価か仮想通貨などの値動き(チャート)を図表とするローソク足のグラフを何らかの方 ...
-
-
マウスオーバーでの画像切り替えをJavaScriptで簡単に対応
マウスが要素にのった際に画像を切り替える処理を入れたかった。多分CSSの管轄なん ...
-
-
画像の登録フォームにてjQueryプラグイン(piCEdit)を用いてWebカメラの映像を撮影させる方法
form内の画像アップロード部分にて、通常であれば画像ファイルを参照させたものを ...
-
-
指定した要素に注釈を設定できる「Chardin.js」プラグインの利用方法
指定した要素に注釈を入れることができるjQueryプラグイン「Chardin.j ...