Nuxt.jsでvue-scrolltoを使ってスムーズにスクロール（smooth scroll）させる

今回は「vue-scrollto」ライブラリを使って、ページ内のリンク移動をスムーズに行えるようにしていきます。

タップできる目次

Nuxt.jsでvue-scrolltoを使ってスムーズにスクロールさせる
1. vue-scrolltoとは？
2. vue-scrolltoを使ってみる

Nuxt.jsでvue-scrolltoを使ってスムーズにスクロールさせる

vue-scrolltoとは？

冒頭にも記載したように、ページ内の要素にスムーズにスクロール（smooth scroll）できるようにしてくれるライブラリです。

DEMOページも丁寧に記述されていて、良いなと思いました！

リポジトリ：https://github.com/rigor789/vue-scrollto
DEMOページ：https://vue-scrollto.netlify.app/examples/

vue-scrolltoを使ってみる

vue-scrolltoをインストール

$ npm i vue-scrollto

pluginsフォルダ配下にvue-scrollto.jsファイルを作成

複数箇所で、vue-scrollを使うことが考えられるので、pluginsフォルダ配下にvue-scrollto.jsファイルを作成します。

オプション詳細については、リポジトリのREADME.mdに記載されています。

import Vue from 'vue'
import VueScrollTo from 'vue-scrollto'

Vue.use(VueScrollTo, {
  duration: 700, // スクロールアニメーションの長さ（ミリ秒）
  easing: [0, 0, 0.1, 1], // easingとはエフェクトの動きを加速/減速させるためのもの
  offset: -100, // 遷移後の位置調整
})

nuxt.config.jsのpluginsとmodulesに追記

nuxt.config.jsファイル内のpluginsとmodulesに下記を追記します。

module.exports = {
  plugins: [
    { src: 'plugins/vue-scrollto.js' }
  ],
  modules: [
    'vue-scrollto/nuxt'
  ]
}

ページ内リンクを作成

nuxt-link toの中にv-scroll-toを入れて飛ばしたいidを指定してあげると、スムーズにスクロール（smooth scroll）させることができます。

index.vue ファイル

<template>
  <scroll-test></scroll-test>
</template>

<script>
import ScrollTest from "../components/ScrollTest.vue"

export default {
  components: {
    ScrollTest
  }
}
</script>

ScrollTest.vue ファイル

<template>
  <div>
    <p>
      <nuxt-link v-scroll-to="'#scroll-test'" to>scroll-testに移動</nuxt-link>
    </p>

    <p id="scroll-test">
      scroll-test
    </p>
  </div>
</template>

<style scoped>
  #scroll-test {
    margin-top: 3000px;
  }
</style>