Vue Smooth Scrollを使ってみた

vue.jsでスムースクロールの実装にトライしてみたので自分用にメモ

インストール

npm install vue-smoothscroll --save

実装

単一ファイルコンポーネント内で実装してみました
(※単一ファイルコンポーネントでも公式での使い方の説明通りで問題なく動作しました)。

app.js

window.Vue = require('vue')

const app = new Vue({
  el: '#app'
})

app.vue

<template>
    <div class="form-group" id="comment">
</template>

<script>
    import vueSmoothScroll from 'vue-smoothscroll'
    Vue.use(vueSmoothScroll)

    export default {
        methods: {
            // 記載はしておりませんが、イベントをトリガーにして以下の処理が行われ、
            // コメント要素までスムーズスクロールされるイメージです
            doSmoothScroll() {
                this.$SmoothScroll(document.querySelector('#comment'), 400, null, null, 'y')
           },
        },
     }
</script>