» TechAcademyの無料体験

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

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

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

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

vue-scrolltoとは?

冒頭にも記載したように、ページ内の要素にスムーズにスクロールできるようにしてくれるライブラリです。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を指定してあげると、スムーズにスクロールさせることができます。

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>

コメント

タイトルとURLをコピーしました