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