如何使用JavaScript实现跳转评论区后移除URL的#comments锚点后缀

方案1：使用JS滚动API完全规避锚点生成（更推荐） #

完全放弃原生a标签锚点跳转逻辑，通过Element.scrollIntoView()实现滚动，全程不会修改URL，自然不会产生锚点后缀。

HTML结构 #

<!-- 跳转按钮，无需写href锚点 -->
<button id="goCommentsBtn">跳转到评论区</button>

<!-- 评论区域，保留id供JS获取 -->
<div id="comments">
  <!-- 评论内容 -->
</div>

JS实现代码 #

document.querySelector('#goCommentsBtn').addEventListener('click', function() {
  const commentArea = document.getElementById('comments');
  if (commentArea) {
    // 滚动到评论区，behavior: 'smooth'为平滑滚动，不需要可以删掉
    commentArea.scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    });
  }
});

如果原本使用a标签作为跳转按钮，只需新增阻止默认行为的逻辑即可：

document.querySelector('a[href="#comments"]').addEventListener('click', function(e) {
  // 阻止原生锚点跳转修改URL的行为
  e.preventDefault();
  const commentArea = document.getElementById('comments');
  if (commentArea) {
    commentArea.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
});

方案2：锚点跳转后主动清除URL哈希 #

如果需要保留「外部带#comments的链接可以直接跳转到评论区」的能力，可以用history.replaceState在跳转后删除哈希，不会刷新页面，也不会留下多余的历史记录。

完整实现代码 #

// 点击跳转按钮的逻辑
document.querySelector('a[href="#comments"]').addEventListener('click', function(e) {
  e.preventDefault();
  const commentArea = document.getElementById('comments');
  if (commentArea) {
    commentArea.scrollIntoView({ behavior: 'smooth', block: 'start' });
    // 清除URL中的锚点后缀
    const cleanUrl = window.location.origin + window.location.pathname + window.location.search;
    history.replaceState({}, document.title, cleanUrl);
  }
});

// 兼容外部带锚点的链接访问：加载页面时自动跳转后清锚点
window.addEventListener('load', function() {
  if (window.location.hash === '#comments') {
    const commentArea = document.getElementById('comments');
    if (commentArea) {
      commentArea.scrollIntoView({ block: 'start' });
      // 清锚点
      const cleanUrl = window.location.origin + window.location.pathname + window.location.search;
      history.replaceState({}, document.title, cleanUrl);
    }
  }
});

两种方案都不会修改页面实际内容，社交分享按钮读取当前URL时不会拿到锚点后缀，完全满足需求。

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