ページを戻った時に、前回見ていた位置に移動させる方法

この記事は約

分で読むことができます

過去の自分が知りたかった情報などを発信し、たくさんの人の役に立てるサイトを目指しています。web制作、お仕事依頼はコメント欄、又はtwitter DMからお願いします。

ブログやCMSアイテムなどのページに遷移して、ページを戻った時に一番上になっていてイライラする！クリックした記事の位置まで戻っていて欲しい。と思ったことはありませんか？私は頻繁にあります。

先日仕事中に上司がセッションストレージを使って条件分岐するコードを教えてくれたのですが、それを使えばできるのではないかと思い試してみました。今回はそれを共有します。

結論：このコードを貼り付ける`‍`

<script>
var scrollPosition; 
var STORAGE_KEY = "scrollY";


function saveScrollPosition(){
    scrollPosition = window.pageYOffset; 
    localStorage.setItem(STORAGE_KEY, scrollPosition);
}

window.addEventListener("load", function(){
    scrollPosition = localStorage.getItem(STORAGE_KEY);
    if(scrollPosition !== null){
        scrollTo(0, scrollPosition);
    }
    window.addEventListener("scroll", saveScrollPosition, false);
});
</script>

こちらのコードを</body>の前に貼り付けます。

このようにブラウザバックした際、前の位置に戻っていれば成功です。

解説

このJavaScriptコードは、ウェブページ上でのスクロール位置を保存し、ページを再読み込みした際に前回のスクロール位置に自動的に戻す機能を実装しています。

まず、scrollPosition という変数が定義されています。この変数は現在のウィンドウの垂直方向のスクロール位置（Y座標）を保持します。また、STORAGE_KEY はローカルストレージに保存する際のキーとして使用されます。

次に、saveScrollPosition という関数が定義されています。この関数は、現在のウィンドウのスクロール位置を取得し、それをローカルストレージに STORAGE_KEY で指定されたキーで保存します。

ページが読み込まれた際には、window オブジェクトの load イベントが発火します。このイベントが発生すると、以下の処理が行われます：

ローカルストレージから前回保存されたスクロール位置を取得し、scrollPosition に代入します。
もし前回のスクロール位置が保存されていれば、その位置にページを自動スクロールします。
scroll イベントが発生した際に saveScrollPosition 関数を呼び出すようにイベントリスナーが登録されます。これにより、ページをスクロールするたびに現在のスクロール位置がローカルストレージに保存されます。

このコードを使うと、ユーザーがページをスクロールした位置が自動的に保存され、次回ページを読み込んだ際に同じ位置に自動的にスクロールすることができます。