点击锚点后id片段保留在URL中，能否通过CSS禁止该行为？

锚点哈希保留在URL是否为默认行为？ #

锚点（URL哈希片段）附加在URL末尾是浏览器处理带href="#xxx"属性的<a>标签跳转时的原生默认行为，属于HTML标准规范的一部分，本身和CSS没有关联。
你遇到的跳转到站点其他页面后哈希仍然残留的情况不属于默认行为，通常是单页应用（SPA）的前端路由配置问题导致的，常规多页站点跳转不同页面时，URL会被新页面的地址完全覆盖，不会残留之前的哈希值。如果是单页应用场景，还需要检查你的路由配置，跳转页面时主动清除不需要的哈希值，避免残留。

注意你提供的示例代码存在语法错误：目标元素的id属性不需要加#前缀，#是哈希标识和CSS选择器的专属标记，正确写法应为<div id="section">links to this section</div>，否则锚点无法匹配到对应元素。

能否通过CSS实现禁止哈希附加到URL？ #

不能。CSS是纯样式层语言，仅负责控制页面元素的外观、布局等渲染效果，没有能力干预浏览器URL地址的修改、HTML交互的默认行为，该需求只能通过JavaScript实现。

可行实现方案 #

你可以通过JS监听点击事件，手动实现滚动定位，同时阻止默认的锚点跳转行为，就不会触发URL哈希修改：

方案1：使用非标签触发滚动（推荐） #

<!-- 用按钮触发，天然不会修改URL -->
<button id="scrollTrigger">跳转到指定区块</button>
<div id="section">目标定位区块</div>

document.querySelector('#scrollTrigger').addEventListener('click', function() {
  // 滚动到目标元素，behavior: smooth实现平滑滚动效果
  document.querySelector('#section').scrollIntoView({
    behavior: 'smooth',
    block: 'start'
  })
})

方案2：保留标签，阻止默认跳转 #

如果一定要使用<a>标签，只需要在点击事件中阻止默认行为即可：

<a href="#" id="scrollLink">跳转到指定区块</a>
<div id="section">目标定位区块</div>

document.querySelector('#scrollLink').addEventListener('click', function(e) {
  // 阻止默认的锚点跳转，避免修改URL
  e.preventDefault()
  document.querySelector('#section').scrollIntoView({
    behavior: 'smooth'
  })
})

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