Angular 5路由切换时如何实现自动滚动至顶部？

我之前在Angular 5项目里也碰到过一模一样的问题！尤其是dashboard里混着短板块和超长板块时，路由切换完停在之前的滚动位置真的很影响体验。给你几个亲测有效的解决办法：

方法一：全局监听路由事件（推荐） #

这是最通用的方案，能让所有路由切换后都自动回到顶部。只需在根组件app.component.ts里做以下操作：

1. 先导入所需的路由模块和工具：

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

2. 在构造函数中注入Router，并精准订阅路由完成事件：

constructor(private router: Router) {
  this.router.events
    .pipe(filter(event => event instanceof NavigationEnd))
    .subscribe(() => {
      // 让浏览器窗口直接滚动到顶部
      window.scrollTo({ top: 0, behavior: 'auto' });
      // 如果你的页面是用自定义容器滚动（比如带overflow属性的div），就换成下面的代码：
      // const scrollContainer = document.getElementById('your-scroll-container-id');
      // if (scrollContainer) scrollContainer.scrollTop = 0;
    });
}

这个方法一劳永逸，不需要在每个组件里重复写代码，完美适配你的dashboard场景。

方法二：单个组件内手动触发 #

如果只有特定几个路由需要回到顶部，也可以在对应组件的ngOnInit钩子中直接调用滚动方法：

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

这种方式更灵活，但如果需要处理的路由多了就会比较繁琐。

注意事项 #

• 如果你的项目用了第三方UI库（比如Angular Material的侧边栏），要注意页面的滚动容器可能不是window，这时候一定要找到正确的滚动元素再设置scrollTop。
• 若担心内存泄漏（虽然根组件一般不会有这个问题），可以把订阅对象存起来，在组件销毁时取消订阅：

import { Subscription } from 'rxjs';

private routerSubscription: Subscription;

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

ngOnDestroy() {
  this.routerSubscription.unsubscribe();
}

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