Nuxt.jsの基礎勉強-vue-scrolltoを使ってみた-

はじめに

今回はボタンを押したら任意の場所までスクロールしてくれる機能をvue-scrolltoを用いて実装した話についてまとめていく。

環境設計

vue-scrolltoとは

v-scroll-toディレクティブを拡張してくれるプラグインのことです。

• 公式ページ
  • vue-scrollto - npm
• 別途参考にしたページ
  • 【Nuxt.js】plugin実践編：vue-scrolltoでスムーズにスクロール｜aLiz｜note

npmからインストールする

$ npm install --save vue-scrollto

pluginに追加する

plugins/vue-scrollto.jsにインストールしたvue-scrolltoを使用する設定を記述する。

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

Vue.use(VueScrollTo, {
 duration: 700,
 easing: [0, 0, 0.1, 1],
 offset: -100,
})

nuxt.config.jsにpluginを読み込む設定を記述する。

export default {
(略)

  plugins: ['~plugins/vue-scrollto'],

(略)
}

vue-scrolltoを使ってみる

pages/sample.vueにて以下のサンプルプログラムを動かして挙動の確認をする。

<template>
 <div class="page">
   <a v-scroll-to="'#anchor'">
     下にとぶ
   </a>
   <div id="anchor" class="test">
     とべた！
   </div>
 </div>
</template>

<style>
.test{
  margin-top: 1000px; 
}
</style>>

終わりに

この拡張機能を使うことで先日作成したナビゲーションバーにv-scroll-toディレクティブを用いることに成功した。