かとのぼのマイコード・マイライフ

個人開発者かとのぼのプログラミングと雑談のブログです。たまに読書と銭湯も

Vue.jsでページを移動した時に画面をトップに戻しておきたい場合

Vue routerを使ってトップにスクロールさせる方法

Vue.jsはSPA(シングルページアプリケーション)なので、もしページの下までスクロールした後にルーターを使って、別のページに遷移しても自動ではトップに戻ってくれません。一般的なサイトではトップになるので、そのように実装したいということはあります。

Vue.jsのVueルーターにはそのような機能をカンタンに実装できる方法が用意されています。

スクロールの振る舞い | Vue Router

 

const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
// 望みのポジションを返す
}
})

この記事を読めばわかりますが、「to」で、ルーターを介して来た動作か、それ以外、例えばスマホの「戻る」を押した場合かどうかを判断し、挙動を変えるという指示をしています。

トップに戻すという実装ならこちらでいけます。

scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}

このコードを、router.jsの所に書けば簡単に実装できます。

const router = new VueRouter({
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
})