Angular 2在Route Change中滚动到顶部

在我的Angular 2应用中，当我向下滚动页面并单击页面底部的链接时，它确实会改变路由并将我带到下一页，但它不会滚动到页面顶部。因此，如果第一页很长，第二页内容很少，就会给人一种第二页缺乏内容的印象。因为只有当用户滚动到页面顶部时，内容才可见。

我可以滚动窗口到ngInit组件的页面顶部，但是，有没有更好的解决方案，可以自动处理我的应用程序中的所有路由?

当前回答

window.scrollTo()在Angular 5中不适用，所以我使用了document.body.scrollTop:

this.router.events.subscribe((evt) => {
   if (evt instanceof NavigationEnd) {
      document.body.scrollTop = 0;
   }
});

其他回答

您可以向组件添加AfterViewInit生命周期钩子。

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

最好的答案在Angular GitHub的讨论中(更改路由不会滚动到新页面的顶部)。

也许你只希望在根路由器的更改中(而不是在子路由器中)转到top。因为你可以在f.e.选项卡中使用惰性加载加载路由)

app.component.html

<router-outlet (deactivate)="onDeactivate()"></router-outlet>

app.component.ts

onDeactivate() {
  document.body.scrollTop = 0;
  // Alternatively, you can scroll to top by using this other call:
  // window.scrollTo(0, 0)
}

全部归功于JoniJnm(原文)

大家好，这在angular 4中是适用的。你只需要引用父节点来滚动路由器更改

layout.component.pug

.wrapper(#outlet="")
    router-outlet((activate)='routerActivate($event,outlet)')

layout.component.ts

 public routerActivate(event,outlet){
    outlet.scrollTop = 0;
 }`

只需点击动作就可以轻松完成

在你的主组件html引用#scrollContainer

<div class="main-container" #scrollContainer>
    <router-outlet (activate)="onActivate($event, scrollContainer)"></router-outlet>
</div>

在主组件.ts中

onActivate(e, scrollContainer) {
    scrollContainer.scrollTop = 0;
}

window.scrollTo()在Angular 5中不适用，所以我使用了document.body.scrollTop:

this.router.events.subscribe((evt) => {
   if (evt instanceof NavigationEnd) {
      document.body.scrollTop = 0;
   }
});

推荐文章