aタグ リロード時の動きについて

Question

実現したいこと

aタグ実装時のリロードで画面トップに遷移させたい

発生している問題・分からないこと

aタグの動きについて
リロードした際は、ページトップに移動するという動きを実装したいのですが、リロードした際に前回クリックしたaタグにジャンプしてしまいます。
urlがaタグによって変更された後、リロードしても切り替わらないという事が原因かと思われます。
jQueryなどでの記載が必要なのでしょうか？

調べてもよくわからなかったのでお詳しい方、必要なコードを教えていただけますと幸いです。

該当のソースコード

下記aタグ(header.phpに書いてます)
<nav class="header_nav" >
      <ul class="navlist_box">
        <li class="nav_item navlist_menu"><a href="#menu">Menu</a></li>
        <li class="nav_item navlist_Access"><a href="#access">Access</a></li>
        <li class="nav_item navlist_QandA"><a href="#qanda">Q&A</a></li>
        <li class="nav_item navlist_contact"><a href="#inquiry">Contact</a></li>
      </ul>
    </nav>

下記aタグのリンク先()front-page.phpという別ファイルに記載しています。
<section class="front_menu" id="menu"></section>
<section class="front_access" id="access"></section>
以下同様

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

リロード時の動きは解説動画等は見当たりませんでした。
記事で見かけたものは実装しましたが、意図した動きはしませんでした。

補足

特になし

Answer 1

ベタにtopにscrollToするとかでもよいかも

<script>
const nav=performance.getEntriesByType("navigation")[0].type;
window.addEventListener('DOMContentLoaded', ()=>{
  if(nav=="reload"){
    setTimeout(()=>window.scrollTo({top: 0}),10);
  }
});

</script>
<style>
#hoge{
     background-Color:red;
   }
.dummy{
 background-Color:gray;
 height:120%;
   }
</style>
<a href="#hoge">to hoge</a>
<div class="dummy"></div>
<div id="hoge">here hoge</div>
<div class="dummy"></div>

Answer 2

JavaScript で、

history.scrollRestoration = "manual";

とするといいかもしれません。

もし、これでだめなら↓とするといいかもしれません。

        performance.getEntriesByType("navigation").forEach((entry) => {
            if (entry.type === "reload") {
                document.addEventListener('DOMContentLoaded', () => {
                    location.href = "#"
                })
            }
        });