Angular11带锚点的navigateByUrl跳转后页面定位错误问题

问题原因 #

• 路由滚动配置冲突：Angular Router默认未开启锚点滚动适配，且导航后会触发默认滚动复位逻辑，你自定义指令的scrollIntoView执行完成后，路由的默认滚动行为会再次修改页面位置，最终停在非目标区域。
• 指令执行时机过早：ngAfterViewInit仅代表组件自身DOM初始化完成，此时router-outlet父容器的布局重排、全局导航生命周期还未结束，scrollIntoView计算的元素坐标不准确，导致滚动偏移。
• Hash路由适配问题：你开启了useHash: true配置，fragment附着在hash路径后，ActivatedRoute.fragment的订阅触发时机早于hash值更新，容易拿到旧的fragment值或者提前执行滚动逻辑。
• 跳转路径错误：你路由中B组件的路径配置为b，但跳转时写的是componentB#header，路径不匹配也会导致fragment解析异常。

解决方法 #

步骤1：修改路由配置，适配锚点滚动 #

在app-routing.module.ts的RouterModule.forRoot参数中添加滚动相关配置，禁用默认滚动复位、开启锚点滚动支持：

RouterModule.forRoot(routes, {
  useHash: true,
  relativeLinkResolution: 'legacy',
  anchorScrolling: 'enabled', // 开启锚点滚动支持
  scrollPositionRestoration: 'disabled', // 禁用默认的导航后滚动复位，避免和自定义逻辑冲突
})

步骤2：修正跳转路径 #

组件A的跳转方法中，把路径改为和路由配置一致的/b#header：

onEditMode(event) {
  event.preventDefault();
  this.router.navigateByUrl('/b#header');
}

步骤3：优化自定义聚焦指令 #

利用路由导航结束事件、requestAnimationFrame保证滚动时机正确，同时直接获取指令挂载的目标元素，避免全局查询误差：

import { Directive, ElementRef, NgZone, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { filter, takeUntil, Subject } from 'rxjs';

@Directive({
  selector: '[appFocusFragment]'
})
export class FocusFragmentDirective implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();

  constructor(
    private elementRef: ElementRef<HTMLElement>,
    private route: ActivatedRoute,
    private router: Router,
    private ngZone: NgZone
  ) { }

  ngOnInit() {
    // 监听路由导航完全结束事件
    this.router.events.pipe(
      filter(e => e instanceof NavigationEnd),
      takeUntil(this.destroy$)
    ).subscribe(() => {
      this.route.fragment.pipe(take(1)).subscribe(fragment => {
        const currentElId = this.elementRef.nativeElement.id;
        if (fragment && currentElId === fragment) {
          // 跳出Angular变更检测，等浏览器重排完成后执行滚动
          this.ngZone.runOutsideAngular(() => {
            requestAnimationFrame(() => {
              this.elementRef.nativeElement.scrollIntoView({
                behavior: 'auto',
                block: 'start'
              });
              this.elementRef.nativeElement.focus({ preventScroll: false });
            });
          });
        }
      });
    });
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

如果以上配置完成后仍有偏移，可以给scrollIntoView添加inline: 'start'参数，或者在路由配置中添加scrollOffset: [0, 0]适配顶部固定导航的高度。

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