_____SK_____
@_____SK_____

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

ページ内リンクでurlを変えないようにしたい

解決したいこと

ページ内リンクでurlを変えないようにしたい。

ページ内リンクではurlの最後に#newsなどがついて、一つ前のurlに戻ると同じページが表示されるのを防ぎたいです。
どうすればできますか?

0

2Answer

location.replaceで履歴を更新せずにURLの遷移が可能です。
https://developer.mozilla.org/ja/docs/Web/API/Location/replace

そのため、元々のクリックイベントを無効化した上でlocation.replaceを使用することで、戻っても同じページになることを防ぎながら、ブラウザのURLを変更することができます。

// hrefが#で始まる同ページへのアンカー全てに対して
document.querySelectorAll('a[href^="#"]').forEach(element => {
  element.addEventListner('click', event => {
    // 元々のクリックイベントを無効化
    event.preventDefault();
    // 履歴を設定せずにページ遷移
    location.replace(element.href);
  });
});
0Like

Your answer might help someone💌