如何为Angular独立式路由器配置滚动恢复？

Angular Router的滚动恢复功能支持自定义配置，要让独立式路由器在导航时自动将router outlet滚动到顶部，只需在初始化路由器时添加滚动配置即可：

具体实现代码 #

import { provideRouter, withInMemoryScrolling } from '@angular/router';

// 你的路由定义
const routes = [
  // 路由配置项
];

// 配置独立路由器
export const appConfig = {
  providers: [
    provideRouter(
      routes,
      withInMemoryScrolling({
        scrollPositionRestoration: 'top',
        scrollOffset: [0, 0]
      })
    )
  ]
};

配置说明 #

• scrollPositionRestoration: 'top'：核心配置，指定每次导航完成后，将滚动位置重置到顶部
• scrollOffset：可选配置，用于设置滚动的偏移量，默认[0,0]，可根据页面布局（比如固定导航栏）调整数值

配置完成后，当你在带有长内容的组件间导航时，router outlet所在的滚动容器会自动滚动到顶部，不会再保留之前的滚动位置。

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