本文へスキップ
メニュー
ダークモード

Next.jsでscroll-behavior: smooth;が効かない時の解決策

投稿 更新 約2分で読めます
目次

事象

スクロールの挙動をCSSでscroll-behavior: smooth;にしたのに、next/linkで作ったページ内リンク（href="#..."）ではスムーススクロールにならず、一瞬で移動してしまいました。

原因

Next.js 12.3.1から13.4.10までは、next/linkで移動するあいだ、scroll-behaviorが一時的にautoへ切り替えられていました。別のページへ移動したときに、スムーススクロールでゆっくり先頭へ戻ってしまうのを防ぐための処理ですが、これがページ内リンクにも適用されていました。

結論

Next.js 13.4.11以降では修正されていて、何もしなくてもページ内リンクでスムーススクロールが効きます。まずはNext.jsのアップデートを検討してください。

Next.js 12.3.1から13.4.10のPages Routerでは、next/linkにscroll={false}を追加するだけで解決します。

JSXJSX · 1行
<Link href="#section" scroll={false}>リンク</Link>
注意

App Routerでは、ページ内リンクにscroll={false}を付けると、スクロール自体が行われなくなります。Next.jsを13.4.11以降にアップデートしたら、scroll={false}は外してください。

Next.js 16での変更

Next.js 16では、ページを移動するときにscroll-behaviorを一時的に切り替える処理が、既定では行われなくなりました。scroll-behavior: smooth;を指定したサイトで以前と同じ挙動にするには、<html>にdata-scroll-behavior="smooth"を付けます。

JSXJSX · 1行
<html lang="ja" data-scroll-behavior="smooth">

参考

関連記事