ブラウザで更新ボタンを押した時に、元の位置に戻らないようにしたい

Question

実現したいこと

• ブラウザで更新ボタンを押した時に、元の位置に戻らないようにしたい

前提

ブラウザで更新ボタンを押すと、ブラウザの標準の処理として更新前にスクロールしていた位置に強制的に戻されることが多いです。その挙動を実行せずに、常に特定の位置に固定で表示させたいです。アンカーリンクでの指定はしないで対応したいです。

試したこと

単純にJavaScriptやjQueryを使ってページに遷移した際に、特定の要素の位置まで移動させることはできるのですが、その後にブラウザの挙動で以前スクロールした位置に戻ってしまいます

Answer 1

リロード時の処理で特定の位置へ予め移動しておけばいいと思います。

window.addEventListener('beforeunload', e => {
    // リロードする前に特定の位置へ予め移動しておく
    window.scrollTo(0, 1000);
});

この処理だとページ遷移した時や閉じた時も移動しますが、特に影響は無いと思います。

ロード時の処理で特定の位置へスクロールしてるなら
beforeunload時の処理はページトップに移動した方がいいかなと思います。

Answer 2

単純にブラウザによるスクロール位置復元機能を抑止したいだけであれば
history.scrollRestoration = "manual" でいけるかもしれません。
https://developer.mozilla.org/ja/docs/Web/API/History/scrollRestoration
ただし、本来の使い方（履歴移動時のスクロール位置復元）の方で期待していない挙動になったりする可能性はあるので
使うのであればちゃんと検証した方がよいです。

---

単純にJavaScriptやjQueryを使ってページに遷移した際に、特定の要素の位置まで移動させることはできるのですが
質問に特に提示されていないのですが、これは具体的にどのようなコードを試したのでしょうか？
何かライブラリを使っていてそちらの影響があるとかでなければ、普通にloadイベント後にスクロール処理すれば問題なく動く気がします。

仮に例えば、『body以前にscript記述してる』＆『loadイベント待たずに処理べた書きしてる』＆『bodyがそれなりに大きくてDOM構築に時間がかかる』…みたいな前提条件で試してうまくいかなかった、という話であれば
単純にloadイベント後に処理を実行するように書き換えればそのままうまくいくのかもしれません。

Answer 3

更新することによってページの内容が変更になっている場合もあるので、更新の制御はすべきではないと思います

Answer 4

performance.getEntriesByType('navigation') で返る配列の中に type プロパティが "reload" のものがあればリロードされたことがわかるので、そのときは目的の位置にスクロールすればよいでしょう。