【js】リロードしたらページトップに戻る実装

案件で表示の都合上リロードした時にページのトップに戻ってほしいということがありました。

多くのブラウザがスクロールした位置を覚えて、リロード時にその位置のまま表示してくれる便利な機能がありますが、今回はそれを無効化したかったです。

CodePen
html
css
js
まとめ

CodePen

See the Pen 【js】リロードしたらページトップに戻る実装 by konno1614 (@konnotes) on CodePen.

CodePenの仕様上、右下のRerunをクリックするとデフォルトでページトップに戻るかもしれません。

実装予定のご自身の環境でテストしていただくことを推奨いたします。

html

<section>Section01</section>
<section>Section02</section>
<section>Section03</section>
<section>Section04</section>
<section>Section05</section>

htmlは適当です。

css

section {
  height: 100vh;
  border: 3px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  & + section {
     margin-top: 20px;
  }
}

cssも適当です。

js

// ページのスクロール位置の復元を手動に設定します。
// これにより、ブラウザがページの再読み込みや戻る/進む操作時に自動的にスクロール位置を復元しなくなります。
history.scrollRestoration = "manual";

// ページがアンロード（閉じる、リロード、ナビゲートなど）される直前に実行されるイベントリスナーを追加します。
window.addEventListener('beforeunload', function() {
    // ページがアンロードされる前にスクロール位置をページの先頭（0, 0）に設定します。
    window.scrollTo(0, 0);
});

ページのスクロール位置の復元を手動に設定し、ページがアンロードされる直前にスクロール位置をページの先頭に設定することで、ページの再読み込みやナビゲーション時にスクロール位置がリセットされるようにしています。