はじめに

ページ内リンクを貼るときに、瞬時に移動するんじゃなくて、するするーっとスクロールさせながら移動させたいときありますよね。Nuxt.jsでそれを導入したいときにぴったりな「vue-scrollto」を今日はご紹介したいと思います。

導入手順

Step1. パッケージのインストール

yarn add vue-scrollto

Step2. プラグインの作成

任意の箇所にvue-scrollto.jsを新規で作成してください。置き場所、ファイル名は自由です。

// plugins/lib/vue-scrollto.js

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

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

Step3. nuxt.config.jsから読み込む

// nuxt.config.js

export default {   
    plugins: [
      ‘~/plugins/lib/vue-scrollto’,
    ],
}   

Step4. 使ってみる

ページ上部の.Headerまでスクロールさせる実装例になります。

<nuxt-link v-scroll-to="'.Header'" to>
  ページTOPへ
</nuxt-link>

v-scroll-to属性の値にスクロール先の要素のセレクタを設定をすれば完了です。この際にセレクタの両端をシングルコーテーションで囲っていることに注意してください。

さいごに

このブログでもところどころ使っていますが便利ですよね。書き方もシンプルで直感的なのが気に入ってます。昔は普通に書いていましたが、こうやってどんどんコーディングする量は減っていくんでしょうね。嬉しいような寂しいような。