【Nuxt】nuxt-linkで遷移するときに画面の一番上にスクロールする

この記事では「nuxt-link」を使って画面遷移した際に、画面の一番上にスクロールさせる方法を紹介します。

「nuxt-link」で画面の一番上にスクロールさせる

「nuxt-link」はデフォルトだと、画面遷移したときにスクロール位置が遷移前と同じ位置を保持します。

先頭にスクロールさせるには、「scrollBehavior」を使用します。

ドキュメントには、次のように記載されています。

router プロパティ

router プロパティを使って Nuxt ルーターをカスタマイズできます。

ja.nuxtjs.org

「nuxt.config.js」の”export default”内に”router”を設定すると、画面が変わる度に先頭までスクロールするようになります。

export default {
  router: {
    scrollBehavior: function (to, from, savedPosition) {
      return { x: 0, y: 0 }
    }
  }
}