【Vue.js】Vue Routerでページ遷移時にスクロール位置をトップにする

こんにちは、Ryohei（@ityryohei）です！

本記事では、Vue.jsのVue Routerでページ遷移時にスクロール位置をトップにする方法をご紹介しています。

上記の疑問にお答えします。

本記事では、下記バージョンのVue.jsとVue Routerを使用して検証しています。動作しない場合はバージョンをご確認ください。

• Vue.js：3.x
• Vue Router：4.x

では、解説していきます。

Vue RouterのScroll Behaviorでスクロールの挙動を設定する

Vue Routerでは、Scroll Behaviorの関数でページ遷移時のスクロールの挙動を設定することができます。例えばページ遷移後にスクロール位置をトップにしたり、セレクターの位置に指定したり、数値の位置に設定したりなど用途は様々です。詳細については下記ドキュメントをご参照ください。

https://next.router.vuejs.org/guide/advanced/scroll-behavior.html

今回は上記のドキュメント内にあります、ページ遷移時にスクロール位置をトップにする方法を見ていきたいと思います。

Vue Routerでページ遷移時にスクロール位置をトップにする

Vue Routerでページ遷移時にスクロール位置をトップにするサンプルです。下記を追記して反映すると、ページ遷移時に常にスクロール位置をトップにすることができます。

# ファイル：src/router/index.js

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    return {
      top: 0
    }
  },
})

ただ、ブラウザの戻るや進むといった操作をした際にもトップに戻るため、戻るや進の場合はページ遷移前のスクロール位置を維持したい場合は下記のように修正します。

# ファイル：src/router/index.js

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return {
        top: 0
      }
    }
  },
})

これでページ遷移時にスクロール位置をトップにすることができます。

最後に

今回はVue Router 4.xでページ遷移時のスクロール位置をトップにする方法を解説しました。もしVue Router 3.xにおける実装方法が知りたい場合は下記のドキュメントをご参照ください。

https://router.vuejs.org/guide/advanced/scroll-behavior.html

以上、Vue.jsのVue Routerでページ遷移時にスクロール位置をトップにする方法のご紹介でした！