Angular锚点滚动延迟问题：导航栏动画致滚动定位异常

• 基于Angular和Bootstrap搭建页面，使用导航栏折叠组件，通过.content容器的内边距将页面内容向下推送，导航栏内的链接指向页面中的锚点元素
• 点击锚点链接时，Angular的RouterModule会尝试导航到对应锚点，但由于导航栏的折叠动画尚未完成，导致滚动定位位置不准确
• 曾尝试使用路由守卫，返回一个延迟0.4秒解析的Promise，但该方案在同一页面内的锚点导航场景下无效
• 补充细节：Angular内部调用window.scrollTo实现锚点滚动，但该方法不支持传入时长参数，也没有回调或Promise返回值，无法准确知晓滚动完成时机；相关W3C草案要求为scrollTo和scrollIntoView添加Promise返回值，但已搁置5年；有方案建议使用IntersectionObserver，但当目标元素已在视口中时该方法无效

方法1：监听导航栏动画完成事件，自定义路由滚动策略 #

1. 在导航栏组件中监听折叠/展开动画的done事件，通过Subject通知动画完成状态
2. 替换Angular Router的默认滚动策略，等待动画完成后再执行滚动操作

// 导航栏组件内
import { Component, ViewChild, ElementRef } from '@angular/core';
import { Subject, take } from 'rxjs';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  animations: [/* 你的SlideUpDownAnimation */]
})
export class NavbarComponent {
  @ViewChild('navbarCollapse') navbarCollapse!: ElementRef;
  navbarAnimationDone = new Subject<void>();

  onNavbarAnimationDone() {
    this.navbarAnimationDone.next();
  }
}

// 路由配置模块
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { NavbarComponent } from './navbar/navbar.component';

const routes: Routes = [/* 你的路由配置 */];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      scrollPositionRestoration: 'enabled',
      anchorScrolling: 'enabled',
      scrollToPosition: (position: [number, number]) => {
        // 获取NavbarComponent实例（可通过依赖注入或全局服务实现）
        const navbar = /* 实例获取逻辑 */;
        navbar.navbarAnimationDone.pipe(take(1)).subscribe(() => {
          window.scrollTo({ top: position[0], left: position[1], behavior: 'smooth' });
        });
      }
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

方法2：自定义锚点链接点击逻辑，延迟导航 #

直接绑定导航栏链接的点击事件，先触发导航栏折叠，等待动画完成后再执行锚点导航：

<!-- 导航栏链接模板 -->
<a class="nav-link" (click)="handleAnchorClick('part-one')">Part 1</a>

// 导航栏组件内
import { Router } from '@angular/router';

constructor(private router: Router) { }

handleAnchorClick(anchorId: string) {
  // 手动关闭折叠的导航栏
  this.navbarCollapse.nativeElement.classList.remove('show');
  // 等待动画完成（对应动画时长，示例为400ms）
  setTimeout(() => {
    this.router.navigate([], { fragment: anchorId });
  }, 400);
}

方法3：动态调整路由滚动偏移量 #

监听导航栏的高度变化，动态修改Router的scrollOffset配置，确保滚动位置自动适配导航栏的展开/折叠状态：

// 导航栏组件内
import { Router } from '@angular/router';

constructor(private router: Router) { }

ngAfterViewInit() {
  // 监听导航栏过渡结束事件
  this.navbarCollapse.nativeElement.addEventListener('transitionend', () => {
    const navbarHeight = this.navbarCollapse.nativeElement.offsetHeight;
    // 更新全局路由配置的滚动偏移
    const currentConfig = this.router.config;
    currentConfig.forEach(route => {
      route.data = route.data || {};
      route.data.scrollOffset = [0, navbarHeight];
    });
    this.router.resetConfig(currentConfig);
  });
}

• 方法1：适配所有路由场景的锚点滚动，符合Angular路由的设计逻辑，推荐用于复杂页面
• 方法2：实现简单，直接控制点击行为，适合小型项目或简单页面
• 方法3：无需延迟，通过动态偏移量适配导航栏高度，需准确监听导航栏的高度变化

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