路由切换时的滚动位置异常问题

原因 #

这是Angular路由的默认行为：当从带有滚动状态的父路由（如/shop）跳转到子路由（如/shop/10）时，浏览器会保留之前的滚动位置，不会自动重置到页面顶部。Angular的路由机制默认会记住用户在路由中的滚动位置，尤其是同层级路由切换场景。

解决方案 #

1. 全局配置路由滚动恢复

在根路由模块（app-routing.module.ts）中设置scrollPositionRestoration为'top'，让所有路由导航后自动回到顶部：

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    scrollPositionRestoration: 'top'
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 特定组件手动重置滚动

如果只需要在产品详情页重置滚动，可在详情组件的ngOnInit钩子中执行滚动操作：

• 直接使用原生API：

ngOnInit(): void {
  window.scrollTo(0, 0);
}

• 使用Angular官方的ViewportScroller服务（推荐）：

import { ViewportScroller } from '@angular/common';

constructor(private viewportScroller: ViewportScroller) { }

ngOnInit(): void {
  this.viewportScroller.scrollToPosition([0, 0]);
}

3. 监听路由事件全局处理

在根组件中监听路由导航完成事件，统一处理滚动重置：

import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

constructor(private router: Router) {
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd)
  ).subscribe(() => {
    window.scrollTo(0, 0);
  });
}

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