😑

Next.jsでページ遷移でのスクロール位置の取り扱い

2021/02/20に公開

簡単だけどメモ

Next.js / framer-motion等でページトランジションを付けると、デフォルトの遷移だと

  1. リンクをクリック
  2. スクロール位置が一番上になる
  3. ページ遷移

という順番になってしまうので、

<Link href="/" scroll={false}>
  ....

というように、scrollプロパティをfalseにしてスクロール位置に関してはなにもしないような設定にする。

あとは読み込み終わり等の時にスクロールを一番上にするような設定にすればよい。
(Next.js 10.0.8)

ブラウザの戻るボタンでのスクロール位置がどうしてもうまくいかなくてちょっとはまったのでメモでした。

すべての遷移を router.push({ pathname: '/' }) のような感じにしたりいろいろ試したが、戻るボタンの挙動が安定しなかったりした。

GitHubで編集を提案

Discussion