ページ内リンクでurlを変えないようにしたい
解決したいこと
ページ内リンクでurlを変えないようにしたい。
ページ内リンクではurlの最後に#news
などがついて、一つ前のurlに戻ると同じページが表示されるのを防ぎたいです。
どうすればできますか?
0
ページ内リンクでurlを変えないようにしたい。
ページ内リンクではurlの最後に#news
などがついて、一つ前のurlに戻ると同じページが表示されるのを防ぎたいです。
どうすればできますか?
window.scroll
を使うのはいかがでしょうか。
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);
});
});