点击带#锚点的href链接跳转时URL不更新无法添加书签如何解决

解决方法 #

你代码中调用了e.preventDefault()阻止了a标签的默认跳转行为，因此浏览器不会自动更新地址栏的hash值，只需手动调用History API更新地址栏即可，无需改动原有逻辑。

具体修改步骤 #

在现有代码的e.preventDefault()语句后，新增一行history.pushState调用即可，修改后的代码片段如下：

on('click', '#navbar .nav-link', function(e) {
    let section = select(this.hash)
  
    if (section) {
      e.preventDefault()
      // 新增以下语句即可实现地址栏hash同步更新
      history.pushState(null, '', this.hash)
      
      // 原有剩余代码保持不变
      let navbar = select('#navbar')
      let header = select('#header')
      // ... 其余原有代码无需修改

补充说明 #

• 如果你不需要保留浏览历史记录（即点击浏览器后退按钮不要回到上一个锚点位置），可以把pushState替换为replaceState，效果是直接替换当前地址栏记录，不会新增历史条目。
• 上述修改不会触发页面刷新，仅同步更新地址栏URL，不影响你现有跳转、导航栏切换、移动端菜单收起的逻辑。

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