スクロール動作の設定
scrollBehavior(to, from, savedPosition)、スムーズスクロール、ハッシュへのスクロール、位置の復元
「スクロール動作の設定」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
ナビゲーション時のスクロールを制御する
シングルページアプリではページが再読み込みされないため、ブラウザーがスクロール位置を自動的にリセットすることはありません。Vue Router の scrollBehavior 関数を使うと、ナビゲーション後にページをどこへスクロールするかを決められます。
設定場所
ルーターを作成するときに scrollBehavior を渡します。これはすべてのナビゲーションで実行されます。
const router = createRouter({
history: createWebHistory(),
routes,
scrollBehavior(to, from, savedPosition) {
// return a position
}
})3 つのパラメーター
to（対象ルート）、from（現在のルート）、savedPosition を受け取ります。最後の値が null 以外になるのは、ブラウザーの戻るボタンまたは進むボタンで移動した場合だけです。
新しいルートでは先頭へスクロールする
最も単純な動作は、ユーザーが新しいページへ移動するたびに先頭へスクロールすることです。
scrollBehavior(to, from, savedPosition) {
return { top: 0 }
}戻るときに位置を復元する
savedPosition が存在する場合はそれを返します。これにより、戻るボタンを押すとユーザーがいた位置に正確に戻り、ネイティブのブラウザーと同じ動作になります。
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
}
return { top: 0 }
}savedPosition が重要な理由
savedPosition を復元しないと、戻るボタンを押したとき、スクロールしていた長いリストの先頭にユーザーが戻されてしまいます。これを返すことで、元の位置を保持できます。
アンカーへスクロールする
対象 URL に #section のようなハッシュがある場合は、el セレクターを返してその要素までスクロールします。
scrollBehavior(to) {
if (to.hash) {
return { el: to.hash }
}
return { top: 0 }
}スムーズスクロール
behavior: 'smooth' を追加すると、瞬時に移動するのではなく、スクロールをアニメーションさせられます。
scrollBehavior(to) {
if (to.hash) {
return { el: to.hash, behavior: 'smooth' }
}
}固定ヘッダー分のオフセットを設定する
固定表示のヘッダーが対象アンカーを覆うことがあります。top をオフセットとして追加し、要素がヘッダーの下に配置されるようにします。
scrollBehavior(to) {
if (to.hash) {
return { el: to.hash, top: 80 }
}
}スクロールを遅延させる
コンテンツが非同期で読み込まれる場合は、遅延後に位置を解決する Promise を返します。これにより、スクロールが実行される時点で対象が存在するようにできます。
scrollBehavior(to, from, savedPosition) {
return new Promise((resolve) => {
setTimeout(() => resolve({ top: 0 }), 300)
})
}ルールを組み合わせる
完全なハンドラーでは、まず保存された位置、次にハッシュアンカーを優先し、それ以外の場合は先頭を返します。
scrollBehavior(to, from, savedPosition) {
if (savedPosition) return savedPosition
if (to.hash) return { el: to.hash, behavior: 'smooth' }
return { top: 0 }
}理解度チェック
スクロール動作についての知識を確認します。
まとめ
scrollBehavior はナビゲーション時のスクロールを制御します。
- to、from、savedPosition を受け取ります。
- savedPosition を返すと、戻るボタンを押したときの位置を復元できます。
- { el: to.hash } を返すと、アンカーへスクロールします。
- 新しいルートへの新規ナビゲーションでは { top: 0 } を返します。
よくある質問
「スクロール動作の設定」レッスンは無料ですか？
はい。「スクロール動作の設定」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「スクロール動作の設定」で何を学びますか？
scrollBehavior(to, from, savedPosition)、スムーズスクロール、ハッシュへのスクロール、位置の復元 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「スクロール動作の設定」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。