javascript - Angular 5在每次点击路线时滚动到顶部

Question

我正在使用 Angular 5。我有一个仪表板，其中有几个部分包含小内容，也有几个部分包含大量内容，以至于我在转到顶部时更改路由器时遇到问题。每次我需要滚动到顶部时。

如何解决这个问题，以便在更换路由器时，我的 View 始终保持在顶部？

Answer 1

有一些解决方案，请确保全部检查:)

---

选项 1:

每当实例化新组件时，路由器导出都会发出 activate 事件，因此我们可以使用 (activate) 滚动(例如)到顶部:

app.component.html

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

app.component.ts

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

   window.scroll({ 
           top: 0, 
           left: 0, 
           behavior: 'smooth' 
    });

    //or document.body.scrollTop = 0;
    //or document.querySelector('body').scrollTo(0,0)
    ...
}

由于平滑滚动在 Safari 中没有很好地实现，例如使用 this solution平滑滚动:

onActivate(event) {
    let scrollToTop = window.setInterval(() => {
        let pos = window.pageYOffset;
        if (pos > 0) {
            window.scrollTo(0, pos - 20); // how far to scroll on each step
        } else {
            window.clearInterval(scrollToTop);
        }
    }, 16);
}

---

如果你希望有选择性，比如不是每个组件都应该触发滚动，你可以在 if 语句中检查它，如下所示:

onActivate(e) {
    if (e.constructor.name)==="login"{ // for example
            window.scroll(0,0);
    }
}

---

选项 2:

从 Angular6.1 开始，我们还可以在急切加载的模块上使用 { scrollPositionRestoration: 'enabled' } ，它将应用于所有路由:

RouterModule.forRoot(appRoutes, { scrollPositionRestoration: 'enabled' })

它也已经可以平滑滚动了。然而，这对于在每个路由上都这样做是不方便的。

---

选项 3:

另一种解决方案是在路由器动画上进行顶部滚动。在您想要滚动到顶部的每个过渡中添加:

query(':enter, :leave', style({ position: 'fixed' }), { optional: true })