如何在结合Bootstrap的jQuery滚动脚本中隐藏URL中的#href？

嘿，针对你想要实现的「区块动画滚动但地址栏不显示#锚点」需求，我给你整理了一套实用的解决方案，核心思路是阻止锚点链接的默认跳转行为，然后用JS手动控制滚动动画，完全不会修改地址栏的Hash。

1. 核心实现代码 #

方案一：基于jQuery（适配Bootstrap常用环境） #

因为Bootstrap大多依赖jQuery，这个方案兼容性更好，直接把这段代码加到你的页面脚本里就行：

// 监听导航链接的点击事件
$('#nav a').on('click', function(e) {
  // 阻止默认锚点跳转，避免地址栏出现#xxx
  e.preventDefault();
  
  // 获取要滚动到的目标区块选择器
  const target = $(this).attr('href');
  // 计算目标区块距离页面顶部的高度
  const scrollTop = $(target).offset().top;
  
  // 执行平滑滚动动画，800是滚动时长（毫秒），可以按需调整
  $('html, body').animate({
    scrollTop: scrollTop
  }, 800);
  
  // 同步更新导航的激活状态（切换current类）
  $('#nav li').removeClass('current');
  $(this).parent('li').addClass('current');
});

方案二：原生JavaScript（无jQuery依赖） #

如果你的项目不想用jQuery，用原生JS也能实现，现代浏览器都支持：

document.addEventListener('DOMContentLoaded', () => {
  const navLinks = document.querySelectorAll('#nav a');
  
  navLinks.forEach(link => {
    link.addEventListener('click', (e) => {
      // 阻止默认跳转行为
      e.preventDefault();
      
      const targetSelector = link.getAttribute('href');
      const targetElement = document.querySelector(targetSelector);
      
      if (targetElement) {
        // 平滑滚动到目标区块
        targetElement.scrollIntoView({
          behavior: 'smooth',
          block: 'start' // 对齐区块顶部，可选值还有'center'
        });
        
        // 更新导航激活状态
        document.querySelectorAll('#nav li.current').forEach(item => {
          item.classList.remove('current');
        });
        link.parentElement.classList.add('current');
      }
    });
  });
});

2. 关键注意事项 #

• 确保你的页面中存在对应ID的区块（比如#body、#1这些），否则滚动逻辑会失效。
• 如果你之前用了Bootstrap的滚动监听组件（data-spy="scroll"），建议暂时禁用，避免和自定义滚动逻辑冲突。
• 原生JS的scrollIntoView的smooth行为不支持IE，如果你需要兼容旧浏览器，优先选择jQuery方案。

3. 结合你的导航HTML的完整示例 #

你的导航HTML不需要修改，直接保留就行，比如：

<nav class="collapse navbar-collapse navbar-right" role="navigation" data-toggle="collapse" data-target=".navbar-collapse">
  <ul id="nav" class="nav navbar-nav">
    <li class="current"><a href="#body">Home</a></li>
    <li><a href="#1">Section 1</a></li>
    <li><a href="#2">Section 2</a></li>
    <li><a href="#3">Section 3</a></li>
  </ul>
</nav>

<!-- 对应页面区块 -->
<section id="body" style="height: 100vh; background: #f5f5f5;">首页内容</section>
<section id="1" style="height: 100vh; background: #e5e5e5;">区块1内容</section>
<section id="2" style="height: 100vh; background: #d5d5d5;">区块2内容</section>
<section id="3" style="height: 100vh; background: #c5c5c5;">区块3内容</section>

<!-- 如果用jQuery方案，记得引入jQuery和Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="bootstrap.min.js"></script>
<!-- 自定义滚动脚本 -->
<script>
// 这里放上面的jQuery或原生JS代码
</script>

这样设置后，点击导航链接时页面会平滑滚动到对应区块，地址栏完全不会出现#锚点，完美符合你的需求～

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