Angular scrollPositionRestoration回到顶部无效

从Angular6.1.0-beta1版本开始，Angular Router增加了scrollPositionRestoration、anchorScrolling 与 scrollOffset 配置项，用于定义路由导航中的位置处理。

scrollPositionRestoration 可能的选项有：

disabled：什么也不做（当前默认）；

top：导航后自动回到页面顶部；

enabled：（后退时）恢复到原始位置或（前进时）基于 anchorScrolling 选项的元素位置（否则置顶）；

anchorScrolling 可能的选项有：

disabled：什么也不做（当前默认）；

enabled：跳转到当前 Fragment 对应元素的位置（如果有的话）；

scrollOffset 用于设定置顶的位置。

最近在做的一个项目中，在app-routing.module.ts添加了scrollPositionRestoration配置项，但是没有效果。

配置代码如下

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    scrollPositionRestoration: 'enabled'//这里也尝试了设置为top，在那个项目里仍然无效
  })],
  exports: [RouterModule]
})

于是我创建了一个新的项目加了上面配置之后就能实现每次路由跳转都能回到页面顶部位置。

网上查阅了很多关于scrollPositionRestoration设置无效的文章，但是都没有得到满意的回答。

有一个说法是，scrollPositionRestoration设置为top后，会在调用已激活组件的ngAfterViewInit钩子之前，会触发滚动事件并恢复滚动位置。因此，当路由器尝试滚动时，该组件的视图尚未准备好。

但是为什么我创建的新项目就有效呢？唯独目前在做的这个项目里这个设置就没有效果。

没办法，只能自己实现了。我的实现方法是在app.component.ts里监听路由改变的事件，当路由变化时，回到页面顶部。实现代码如下

ngOnInit() {
    this.router.events.subscribe((evt) => {
        if (evt instanceof NavigationEnd) {
            window.scrollTo(0, 0)；
	    //这里回到顶部，有很多写法
	    //假如你有滚动容器，可以这样写
            //const ele = document.getElementsById('容器Id');
	    //if (ele) {
	    //    ele.scrollIntoView();
	    //}
        }
    });
}