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

（2022.2.28　記）

▼ブログ移行しました！▼

slc-datsusara.net

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

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

①スクロール位置の取得

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

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

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

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

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

０．実行環境

■実行環境

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

・LinuxOS：Ubuntu18.04

・Apache：2.4

・MySQL：5.7

・PHP：7.2

１．実装方法

以下の文を<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座標）を変数に格納

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

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

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

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

イベント①の処理で最後にセッションを破棄しているのは、セッションが残っているが故に思わぬ動きをするのを防ぐ意図で入れています。

２．最後に

今回はセッションにデータを保持するやり方で組んでいますが、Ajax*1を用いてデータベースなどに保持してもいいと思います。

以上。 

（不明点あればコメント頂ければ、可能な限りお答えします。）

リンク

*1:『Asynchronous JavaScript And XML』の略。非同期通信を行い、フロントエンド側で動的にWebページ上のデータを改変させたいときに利用される。