JavaScript

ブラウザの戻るボタンで正確な位置に戻る：縦長LPページのスクロール位置制御【セッションストレージ】

  /

縦長のLPページでは、ユーザーがページをスクロールすると、多くのコンテンツが表示されます。ユーザーがリンクをクリックして別ページに移動し、戻るボタンでLPに戻った時、以前の位置に正確に戻れるようにするには、スクロール位置を保存する必要があります。

ウェブページのスクロール位置を管理するためのJavaScriptのアプローチは、主にセッションストレージ（sessionStorage）やローカルストレージを利用した方法があります。ここでは、クッキーを使用しない代わりの方法として、セッションストレージ（sessionStorage）を使用したJavaScriptの例を紹介します。

Contents

セッションストレージ（sessionStorage）を使用したスクロール位置の保存

セッションストレージは、ブラウザのタブが開いている間、データを保存することができるウェブストレージAPIの一部です。
以下のコード例は、セッションストレージを使用してスクロール位置を保存し、ウェブページに戻った際にその位置にスクロールする方法を示しています。

// ウェブページがロードされた際に実行
window.onload = function() {
    // セッションストレージからスクロール位置を取得し、その位置にスクロールする
    if (sessionStorage.getItem('scrollPosition')) {
        window.scrollTo(0, sessionStorage.getItem('scrollPosition'));
    }

    // ユーザーがスクロールするたびに、その位置をセッションストレージに保存
    window.onscroll = function() {
        sessionStorage.setItem('scrollPosition', window.scrollY);
    };
};

　
このコードでは、ウェブページがロードされるときに、セッションストレージからスクロール位置を読み取り、その位置に移動します。また、ユーザーがスクロールするたびに、その位置をセッションストレージに保存します。

PCとスマートフォンでは、画面のサイズや解像度が異なるため、表示されるコンテンツの量が異なります。これにより、スクロール位置の管理が異なる場合があります。しかし、上記のJavaScriptコードは、デバイスに関わらず機能します。

セッションストレージ（sessionStorage）の利点

  • ユーザーのプライバシー保護:
    クッキーと異なり、セッションストレージはサーバーにデータを送信しません。これにより、GDPRなどのプライバシー関連の規制の影響を受けにくくなります。
  • タブ固有のデータ保存:
    セッションストレージは、開いているタブに固有のデータを保存します。これにより、複数のタブで同じサイトを開いている場合でも、各タブのスクロール位置が独立して保存されます。
  • 容易な実装:
    セッションストレージはJavaScriptで簡単に使用でき、特別な設定や同意が不要です。

まとめ

クッキーを使用せずにスクロール位置を管理するには、セッションストレージを利用する方法が有効です。この方法は、ユーザープライバシーを保護し、ブラウザのタブごとにデータを独立して扱うことができるため、特にウェブアプリケーションやインタラクティブなウェブサイトに適しています。また、JavaScriptの基本的な機能を利用しているため、追加のライブラリやフレームワークを必要としない点も利点です。

sessionStorage ブラウザの戻る セッションストレージ
関連記事