[問題] 換頁時,卷軸不會滾動到最上方

#1

Hi 我又來求救了…Orz

這次的問題就像標題所說的,
換頁之後,卷軸不會自動滾動到最上方。

我知道,或許我可以在每個component初始化的時候去控制,
但這樣實在是有點難以維護…

我是使用UI-Router的,我有找到一些解決方式,
但都是AngularJS的,像是<ui-view autoscroll="true"></ui-view>之類的,
我也爬了官方文件,但實在是沒有找到類似的說明,才上來求救
麻煩如果有人有解決過類似問題的話,
拜託指點一下小弟我,
感激不盡!!

#2

給你一個方向去思考看看

Angular 內的 Routing 有所謂的 Router events,那是不是能在 NavigationEnd 時,讓頁面回到做上層,這樣子每一次頁面轉換時,都可以確保頁面會回到最上層

2個讚
#3

我解決了!!感謝Kevin大的提醒~~

分享一下我的解決方式:

其實我在Navigation父層已經有新增一個Listener,
是在state changed success之後會觸發的callback function

API連結:

既然有這個listener存在就很簡單啦~
照著之前問過Kevin大的方式:

先取得主要會切換state的範圍的那塊div的ElementRef
再到state changed success的callback執行

(<HTMLElement>this.mainContent.nativeElement).scrollIntoView();

Done.

#4

您好:
我有在網路上找到了一個更簡單的方式,
只要在 AppRoutingModule.ts 加入以下一行即可,
imports: [RouterModule.forRoot(routes, {scrollPositionRestoration: ‘top’})]

1個讚