.webp)
ブログや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関数を呼び出すようにイベントリスナーが登録されます。これにより、ページをスクロールするたびに現在のスクロール位置がローカルストレージに保存されます。
このコードを使うと、ユーザーがページをスクロールした位置が自動的に保存され、次回ページを読み込んだ際に同じ位置に自動的にスクロールすることができます。
.webp)
