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

1 min読了の目安(約400字TECH技術記事

簡単だけどメモ

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

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

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

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

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

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

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

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