【JavaScript】スクロール位置の取得、強制スクロールする方法

（2022.2.28　記）

「縦長横長になってしまうページに戻ったとき、ページ先頭ではなくスクロールしていた位置に自動でスクロールさせたい」という要望を実装た時の忘備録です。

色々方法は考えられますが、Javascriptを用いて以下３点の方法を組み合わせて実装してみました。

①スクロール位置の取得

②セッションへのデータ保存、セッションからのデータ取得

③指定した位置に強制スクロール

詳細は以下にて説明しています（初、中級者向け解説）。

※まだ中級者なので、もっといい方法があったら教えて欲しい

（全行程の所要時間：コピペで終わり）

０．実行環境
１．実装方法
２．最後に

０．実行環境

■実行環境

・さくらVPN（メモリ：１GB、CPU：２コア、SSD：１００GB）

・LinuxOS：Ubuntu18.04

・Apache：2.4

・MySQL：5.7

・PHP：7.2→7.4（2024.9.11）

１．実装方法

以下の文を<script>タグで囲ってあげて、</body>の直前にコピペ

  // イベント設定①
$(window).on('load', function() {
//セッション取得
var top = window.sessionStorage.getItem(['scroll_top']);
var left = window.sessionStorage.getItem(['scroll_left']);
// 指定位置にスクロール
$(window).scrollTop(top);
$(window).scrollLeft(left);
//セッション破棄
window.sessionStorage.clear();
});
// イベント設定②
$(window).scroll(function() {
var top = $(this).scrollTop();
var left = $(this).scrollLeft();
window.sessionStorage.setItem(['scroll_top'],[top]);
window.sessionStorage.setItem(['scroll_left'],[left]);
});

これだけ。

説明としては・・・

イベント①：ページが表示される度に呼び出される関数

①セッションに保持されたスクロール位置（x座標、y座標）を取得

②.scrollTop、.scrollLeft関数を用いて、指定した座標にスクロール

③セッションの破棄

イベント②：スクロールされる度に呼び出される関数

①現在のスクロール位置（x座標、y座標）を変数に格納

②セッションにそれぞれの座標を保持

・・・という内容が書かれています。

処理巡としてはイベント①→イベント②となりますが、初回ページ表示時にはセッションに何も保持されていなので、スクロールされた際にイベント②だけが処理されます。

その後別ページに移動し、また同じページに戻ってきた際にはセッションにスクロール位置が保持されているので、イベント①の処理で自動スクロールされる流れになります。