概要

next.jsのApp RouterやLinkのデフォルト仕様として、画面の一番上に自動的にスクロールされる。それはとても望ましいが、たまにそうならない時があるので、この記事ではそれのあらゆる原因や背後の仕組みを検討する。

結論

遷移後の画面にコンテンツの描画が遅延されたことはほとんどの原因である。それを防ぐには、遅延しないか、遅延するが自力でスクロールさせるか、のどちらだと思う。

画面遷移が成功後を検知したら、scroll処理を行なうだけだと推測される

なので、ブラウザが持っているスクロール位置がプログラミングで操作しない限り変わらないはず。next.jsで望まれる形に画面遷移されたら、一番上にスクロールさせる。

ブラウザのナビゲーションのBack/Forwardボタンで前後の画面に遷移する場合、ブラウザが勝手に元のスクロール位置に戻れる機能である。ただ、それは物理遷移の場合に動くが、SPAのような論理遷移が効かない。

次へボタンをクリックして、次の画面が表示されたら上から順番に見たいので一番上にスクロールされるのがありがたい。

ただし、画面上の戻るボタンをクリックして前画面に戻った時も、一番上にスクロールされるのがちょっと違うかも。なぜなら、前画面を遷移前の元場所に戻られて、次へボタンをすぐクリックできるのも望まれることがあるではないか。

戻るボタンのクリックでrouter.back()を呼び出した場合、確かに一番上にスクロールしないが、元の場所に戻すこともない、つまり現状維持
戻るボタンのクリックでrouter.push('/hoge')形式で前画面に戻った場合、一番上にスクロールしてしまう
- もちろんrouter.push('/hoge', { scroll: false })を呼べば、一番上にスクロールしないが、元の場所に戻すこともない、現状維持

面白いことが、縦長の画面Bの一番下で戻るボタンをクリックして、縦のサイズがより小さい画面Aに戻ったら、画面Aのスクロール場所も一番したになる
- 現状維持でスクロール位置を変えてないが、ブラウザが賢く大きい値を実際の画面サイズに修正してくれる
逆に縦のサイズが小さい画面Aの一番下からサイズが大きい画面Bに戻ったら、画面Bのスクロール位置が真ん中になる

つまり、プログラミングで何もしない限り、Back・Forwardする場合はスクロールの縦位置が元のままで中途半端の状態になる。

では、ブラウザのScroll Restoration機能のようにBack・Forward時にも賢く元の位置に戻せるにはどうすれば良いでしょうか。自力でやるしかないが、

実際にやってないが、しかも困難であるが、その時のアプローチだけをメモする。

routerやlink拡張以外の方法では位置を覚えても、復元するかの指示が難かしいので、それらのアプローチを除外する
ブラウザのナビボタンをクリックする場合は、常に元の位置を復元させる
画面操作での画面遷移は、pushやbackやlinkのonclickで処理する
- 復元しないと指示した場合は、該当ページの位置情報を削除
- 遷移後に位置情報があればそれで復元する、なければ一番上にスクロールさせる