如何不使用ID实现页面内锚点导航且不修改URL？

一、不修改URL的页面内导航实现 #

别用锚点标签的默认跳转逻辑，改用JS直接滚动到目标元素，这样URL不会变，也不会在浏览器历史里新增条目：

• 给导航链接绑定点击事件，阻止默认跳转行为
• 找到目标元素后调用scrollIntoView()实现滚动（还能开启平滑动画）

示例代码：

<!-- 导航链接 -->
<a class="nav-link" data-target="abc">跳转到abc章节</a>

<!-- 目标章节 -->
<div id="abc">这是abc章节的内容</div>

<script>
document.querySelectorAll('.nav-link').forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    const targetId = link.dataset.target;
    const target = document.getElementById(targetId);
    if (target) {
      target.scrollIntoView({ behavior: 'smooth' });
    }
  });
});
</script>

用这种方式，点击导航后URL完全不变，浏览器返回按钮会直接回到上一个访问的网站，不会停在页面内的历史记录。

二、已用锚点时的返回按钮处理方案 #

如果已经用了传统锚点（URL会带#abc这类hash），可以监听popstate事件来修改返回行为：

let prevHash = window.location.hash;

window.addEventListener('popstate', () => {
  // 检测是否是从带hash的页面回到无hash状态
  if (window.location.hash === '' && prevHash !== '') {
    // 直接跳转到外部网站（替换成你需要的离开地址）
    window.location.href = 'https://目标网站地址';
  }
  prevHash = window.location.hash;
});

注意：这种方式会影响用户手动输入hash后的返回行为，所以优先推荐第一种无hash的滚动方案。

内容的提问来源于stack exchange，提问作者Pranav Bedre