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

Vue.jsではページの遷移をVue Routerを使って移動しますが、普通のサイトのように画面が自動でトップに戻ってはくれません。下までスクロールしてページを移動した場合、位置が下のままになってしまいます。これだとユーザーに不親切なので、ページを移動した時にはトップに戻るようにしましょう。

scrollBehavior関数で簡単解決

Vue.jsにはscrollBehavior関数という便利な機能がありますので簡単に解決できます。

スクロールの振る舞い

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

Routerは、to, from savedPositionの意味を理解すればシンプルです。

• 「to」はどのページに行きたいか？のルートオブジェクト
• 「from」はどのページからきたか？のルートオブジェクト
• 「savedPostion」はブラウザの戻るボタン、進むボタンがトリガーされた時に機能するオプション

と覚えましょう。
つまり、上記のコードは、Routerがトリガーされた時には必ず反応します。ですから、そこでポジションをどうするかを指定してあげれば良いのです。

普通、戻るや進むの時はページの位置はそのままで、違うページのリンクをクリックされたらトップに戻したいはずなので、その時は以下のように書きます。

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

とてもシンプルですね。

これだけでSPAでも普通のウェブサイトのようなページ遷移ができるので、ぜひ試して見てください。

終わり。

宣伝
ブログ書いています！ブログ
Vue初心者向けのサンプルコード集作っています サイト