Angular中window.scrollTo平滑滚动在头部组件失效问题排查

问题核心 #

同一个scrollToTop方法，在scroll-to-top组件中调用可正常触发平滑滚动，但在header组件的链接点击事件中调用时，平滑滚动失效，仅当全局设置html { scroll-behavior: smooth; }才生效——但该全局设置会干扰路由scrollPositionRestoration: 'enabled'的即时滚动恢复需求。

原因分析 #

差异的本质是路由导航逻辑的干扰：

• scroll-to-top组件的点击是独立操作，未触发Angular的路由导航流程，因此window.scrollTo({behavior: 'smooth'})能正常执行。
• header组件的链接点击，即使是跳转当前路由，也会触发Angular的路由导航周期，其中scrollPositionRestoration的即时滚动恢复逻辑会优先执行，直接覆盖了手动调用的平滑滚动请求。

解决思路 #

方法1：阻止同一路由的默认导航行为（推荐） #

当判断为同一路由时，阻止链接的默认跳转行为，避免触发Angular的路由导航流程，从而消除滚动逻辑冲突：

修改header.component.ts：

onHeaderLinkClick(link: string, drawer: MatSidenav, event: Event): void {
  const currentUrl = this.router.url;
  const baseUrl = currentUrl.split('/')[1];

  if (baseUrl === link || (baseUrl === '' && link === '/')) {
    event.preventDefault(); // 阻止默认路由跳转行为
    drawer.close();
    this.scrollService.scrollToTop();
  }
}

同时在模板中传递点击事件参数：

<!-- 示例header链接模板 -->
<a (click)="onHeaderLinkClick('home', drawer, $event)" routerLink="/home">首页</a>

方法2：延迟执行滚动，避开路由逻辑干扰 #

如果无法阻止默认导航行为，可通过延迟执行滚动，让路由的即时滚动逻辑先完成：

onHeaderLinkClick(link: string, drawer: MatSidenav): void {
  const currentUrl = this.router.url;
  const baseUrl = currentUrl.split('/')[1];

  if (baseUrl === link || (baseUrl === '' && link === '/')) {
    drawer.close();
    // 延迟100ms执行，避开路由滚动逻辑的优先级
    setTimeout(() => {
      this.scrollService.scrollToTop();
    }, 100);
  }
}

方法3：自定义路由滚动策略 #

禁用默认的scrollPositionRestoration，手动实现路由导航时的即时滚动恢复，同时保留手动调用的平滑滚动：

// 在AppModule中配置自定义滚动策略
import { RouterModule, Scroll } from '@angular/router';
import { ViewportScroller } from '@angular/common';
import { filter } from 'rxjs/operators';

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      scrollPositionRestoration: 'disabled', // 关闭默认滚动恢复
      scrollOffset: [0, 0]
    })
  ],
  providers: [
    {
      provide: ViewportScroller,
      useClass: CustomViewportScroller
    }
  ]
})
export class AppModule {}

// 自定义ViewportScroller类
class CustomViewportScroller extends ViewportScroller {
  constructor(private router: Router) {
    super(window, document);
  }

  override scrollToPosition(position: [number, number]): void {
    // 仅在不同路由导航时执行即时滚动恢复
    this.router.events
      .pipe(filter(event => event instanceof Scroll))
      .subscribe((event: Scroll) => {
        if (event.position) {
          // 路由导航时用即时滚动
          window.scrollTo({ top: event.position[0], behavior: 'auto' });
        }
      });
  }
}

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