Angular 5滚动页面到顶部（scroll top）

例如在文章页面组件PostComponent，对于的路由为/posts/:id。

export class PostComponent implements OnInit {
  post$: Observable<Post>;
  private selectedId: number;
  constructor(
    private service: PostService,
    private route: ActivatedRoute
  ) {}
  ngOnInit() {
    this.heroes$ = this.route.paramMap
      .switchMap((params: ParamMap) => {
        this.selectedId = +params.get('id');
        return this.service.getPost();
      });
  }
}

切换id时，PostComponent组件不会重新加载，只会重新渲染组件内容。在有滚动条页面，重新渲染组件内容时，滚动条不会回到页面顶部。

对于app的页面，可以使用window.scroll()方法，如

app.component.html

<router-outlet (activate)="onActivate($event)" ></router-outlet>

app.component.ts

onActivate(event) {
    window.scroll(0,0);
    ....
}

如果是页面内的元素有滚动条，window.scroll()可能不行，可以使用top.scrollIntoView()。如

出现滚动条的元素

<div ></div>

PostComponent

ngAfterViewInit() {
    let top = document.getElementById('top');
    if (top != null) {
      top.scrollIntoView();
      top = null;
    }
  }