[ 目次 ]

• はじめに
• "vue-scrollto"のインストール
• pluginファイル作成
• nuxt.config.jsにplugin設定追加
• v-scroll-to属性追加

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

今回はNuxt.jsで構築された本ブログに、"vue-scrollto"を導入して"トップに戻る"ボタンの処理にスムーズなアニメーションを追加します。

"vue-scrollto"のドキュメントはこちら

"vue-scrollto"のインストール

■ npmを利用する場合

$ npm install vue-scrollto --save

■ yarnを利用する場合

$ yarn add vue-scrollto

pluginファイル作成

pluginsディレクトリ配下にvue-scrollto.jsファイルを作成し、ライブラリを読み込みます。

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

Vue.use(VueScrollTo)

nuxt.config.jsにplugin設定追加

nuxt.config.jsのpluginsにplugins/vue-scrollto.jsを指定します

・・・
plugins: [
    '~/plugins/buefy.js',
    '~/plugins/vue-scrollto.js' // ここを追加
],
・・・

v-scroll-to属性追加

"トップへ戻る" ボタンの属性にv-scroll-toを追加します。
公式ページでは以下のように記載があります。

<a href="#" v-scroll-to="'#element'">Scroll to #element</a>
<div id="element">
    Hi. I'm #element.
</div>

今回はbodyタグの開始位置まで戻れればいいので、以下のようにしました。

<a
      id="page-top"
      class="button is-danger is-large is-circle"
      :class="{'is-hidden': scrollY < 200}"
      v-scroll-to="'body'"
>
      <i class="fas fa-angle-up"></i>
</a>

※ id属性など他の属性はボタンのスタイル変更に利用しています

どのような動きになるかは、本ブログ右下の"🔼"をそして見てください！