2019-08-31に更新

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

Vue

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初心者向けのサンプルコード集作っています サイト

Originally published at www.katonobo.com

かとのぼ

webサービス開発者/IT/バックパッカー/ 運営サービス→Ameneko Diary(あめねこダイアリー)/あめねこサンプルコード集

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント