縦長のLPページでは、ユーザーがページをスクロールすると、多くのコンテンツが表示されます。ユーザーがリンクをクリックして別ページに移動し、戻るボタンでLPに戻った時、以前の位置に正確に戻れるようにするには、スクロール位置を保存する必要があります。
ウェブページのスクロール位置を管理するためのJavaScriptのアプローチは、主にセッションストレージ（sessionStorage）やローカルストレージを利用した方法があります。ここでは、クッキーを使用しない代わりの方法として、セッションストレージ（sessionStorage）を使用したJavaScriptの例を紹介します。
セッションストレージ（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の基本的な機能を利用しているため、追加のライブラリやフレームワークを必要としない点も利点です。
