## はじめに
本ブログをNuxtからNextにリプレイスしました。

その中で、next/linkのリンクから、動的ルーティングのページに遷移したときに、スクロール位置が本当は一番上に戻って欲しいのに、中途半端な位置になってしまうバグにハマりました。

自分へのメモも兼ねて、記事に残します。

## 結論
cssの中にoverflow系のものがあれば、消してみましょう。

## next/link
next/linkは、Next.jsにおけるページ遷移のためのリンクを提供する機能です。

このPropsには、scrollなるものが含まれおり、これをtrueにすると、ページ遷移後に一番上までスクロールしてくれます

そもそもReactでは、DOMを書き換えてページを更新しているために、何もしなければ、スクロール位置はそのままです。
なので、わざわざ一番上までスクロールしてもらう必要があるのですね。

しかし、このPropsのscrollは、デフォルトでtrueらしいのです。なぜ、一番上までスクロールしてくれないことがあるんだああああ

## 解決法
ネットの海をさまようこと２時間、
NextのGithubのIssueに答えはありました。やはり公式は神なのか。
[https://github.com/vercel/next.js/issues/7594](https://github.com/vercel/next.js/issues/7594)

overflow系のcssプロパティがついている要素で、ページがラッピングされていると、heightを正しく計算できないために、スクロールに失敗するということでした。

## daisyui
vscodeの検索欄に「overflow」と入力しました。検索結果は０件でした。
なんとか探しまわった結果、tailwindベースのdaisyuiが犯人であることがわかりました。

今回はdaisyuiを使って、スマホ用のナビゲーションドロワーを実装していたのですが、その中に```overflow-y: auto```の文字が。。

泣く泣くdaisyuiでの実装から、tailwindだけでの実装に書き直したのでした。

## おわりに
もう一生解決できないのではないかと、あきらめかけていました。
でも最後の砦はやっぱり、Githubなのですね。

問題解決能力がちょっとだけ上がった気がしました。


next/linkから動的ルーティングのページに遷移したときに、スクロール位置が一番上じゃないバグへの対処法を説明します。

Next.js

【Next.js】next/linkから動的ルーティングのページに遷移したときに、スクロール位置が一番上じゃないバグへの対処法