Angular+Bootstrap单页应用导航锚点跳转兼容问题求解

Bootstrap 5的collapse组件绑定在<a>标签上时，会默认阻止链接的原生跳转行为，这就是给导航链接加了data-bs-toggle="collapse"属性后锚点跳转直接失效的核心原因。另外你用了sticky-top固定导航，就算跳转正常，也会出现锚点顶部内容被导航栏遮挡的问题。

不要依赖Bootstrap的data属性同时绑定「折叠菜单」和「锚点跳转」两个逻辑，把两个动作拆分用Angular代码控制，完全避开组件默认的行为拦截，兼容性最好。

步骤1：清理模板上的冲突属性 #

把所有导航项<a>标签上的data-bs-toggle="collapse" data-bs-target="#navbarNav"属性全部移除，只保留href指向对应锚点即可，你代码里#tarife链接本身没加这两个属性，保持统一逻辑就行。

步骤2：在组件中编写导航处理逻辑 #

在对应组件的ts文件中，引入Bootstrap的Collapse实例，统一处理菜单收起和锚点滚动：

import { Component, AfterViewInit } from '@angular/core';
import { Collapse } from 'bootstrap';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html'
})
export class NavbarComponent implements AfterViewInit {
  navbarCollapseIns: Collapse | null = null;

  ngAfterViewInit(): void {
    // 初始化导航折叠菜单实例
    const navbarDom = document.getElementById('navbarNav');
    if (navbarDom) {
      this.navbarCollapseIns = Collapse.getOrCreateInstance(navbarDom, { toggle: false });
    }
  }

  handleNavClick(anchor: string): void {
    // 仅在移动端（Bootstrap lg断点以下，菜单为折叠状态）执行收起动作
    if (window.innerWidth < 992 && this.navbarCollapseIns) {
      this.navbarCollapseIns.hide();
    }
    // 无锚点参数（电话、邮箱类导航）直接终止后续滚动逻辑
    if (!anchor) return;
    // 执行锚点跳转，自动减去固定导航高度避免内容被遮挡
    const targetDom = document.getElementById(anchor);
    if (targetDom) {
      const navHeight = document.querySelector('.navbar')?.clientHeight || 0;
      const offsetTop = targetDom.getBoundingClientRect().top + window.scrollY - navHeight;
      window.scrollTo({ top: offsetTop, behavior: 'smooth' });
    }
  }
}

步骤3：给模板绑定点击事件 #

修改导航链接模板，给所有导航项绑定上面写好的点击方法：

<!-- 锚点类导航项示例 -->
<li class="nav-item">
  <a class="nav-link" href="#acasa" (click)="handleNavClick('acasa')">Acasa</a>
</li>
<li class="nav-item">
  <a class="nav-link" href="#servicii" (click)="handleNavClick('servicii')">Servicii</a>
</li>
<li class="nav-item">
  <a class="nav-link" href="#despre-mine" (click)="handleNavClick('despre-mine')">Despre mine</a>
</li>
<li class="nav-item">
  <a class="nav-link" href="#tarife" (click)="handleNavClick('tarife')">Tarife</a>
</li>
<!-- 其余锚点导航项按上述格式补全即可 -->

<!-- 非锚点类导航项（电话、邮箱）传空参数，仅触发菜单收起 -->
<li class="nav-item">
  <a class="nav-link" href="tel:xxxxxxxxx" (click)="handleNavClick('')">
    <span><i class="bi bi-telephone contact">&nbsp;xxx.xxx.xxx</i></span>
  </a>
</li>
<li class="nav-item">
  <a class="nav-link" href="mailto:contact@xxx.ro" target="_blank" (click)="handleNavClick('')">
    <span><i class="bi bi-envelope contact"> contact@xxx.ro</i></span>
  </a>
</li>

方案说明：

• 完全避开Bootstrap collapse组件对a标签原生行为的拦截，两个功能互不干扰
• 自动适配屏幕尺寸，桌面端（菜单默认展开状态）点击导航不会执行多余的收起动作
• 自动计算固定导航高度，跳转后锚点内容不会被顶部导航遮挡
• 非锚点导航和锚点导航复用同一套逻辑，不需要额外写重复代码

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