Angular 5页面导航时无法从顶部加载问题求助

嘿，我之前帮好几个Angular开发者搞定过这种导航后页面停留在之前滚动位置的问题，针对你的Angular 5基础项目（用ng new生成的无第三方库环境），给你几个靠谱的解决方案：

方法1：用官方内置的路由滚动配置（最推荐） #

Angular从5版本开始就内置了滚动位置控制的功能，你只需要在app.module.ts的路由配置里加一行配置就行：

修改你的RouterModule.forRoot()部分代码：

const routes: Routes = [
  // 你的现有路由，比如 { path: 'page1', component: Page1Component },
];

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes, {
      scrollPositionRestoration: 'top' // 核心配置：每次导航后自动回到页面顶部
    })
  ],
  declarations: [AppComponent, Page1Component],
  bootstrap: [AppComponent]
})
export class AppModule { }

这个方案最省心，完全是官方原生支持，不需要额外写业务代码。

方法2：手动监听路由事件（自定义场景适用） #

如果内置配置没生效，或者你需要更灵活的滚动逻辑（比如某些页面不需要回到顶部），可以手动监听路由的NavigationEnd事件，然后强制滚动到顶部：

在app.component.ts里添加以下代码：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private router: Router) {
    // 监听路由导航完成事件
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      // 滚动到页面顶部
      window.scrollTo(0, 0);
    });
  }
}

注意要导入rxjs的filter操作符，Angular 5对应的rxjs版本是5.x，这个写法完全兼容。

方法3：兼容不同浏览器的原生滚动写法 #

如果上面的方法在某些浏览器里不生效，可以试试更底层的原生DOM操作，覆盖不同浏览器的兼容问题：

把方法2里的window.scrollTo(0, 0)替换成：

document.documentElement.scrollTop = 0;
document.body.scrollTop = 0; // 兼容旧版Chrome/Firefox

小排查技巧 #

• 检查你的页面有没有自定义滚动容器（比如设置了overflow: auto的div），如果是这种情况，你需要针对那个容器元素设置滚动到顶部，而不是全局的window或document。
• 确认你的路由配置里没有把scrollPositionRestoration设为enabled（这个值是恢复上一次的滚动位置，和我们要的效果相反）。

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