Vue.jsでスムーススクロールを実装する「vue-smooth-scroll」

vue-smooth-scrollとは

vue-smooth-scrollは、シンプルなVue.jsスムーススクロールライブラリです。

環境

インストール

以下のnpm、CDNを使ってインストールします。

npm

npm install --save vue-smooth-scroll

CDN

<script src="https://cdn.jsdelivr.net/npm/vue-smooth-scroll@1.0.13/dist/vue-smooth-scroll.min.js"></script>

gitリポジトリは以下から取得できます。

https://github.com/ocordeiro/vue-smooth-scroll

導入手順

1. ライブラリの取り込み

（1）ES6等の場合 [注意]モジュール版は未検証です。

import vueSmoothScroll from 'vue-smooth-scroll'

（2）CDNの場合

const vueSmoothScroll = window['VueSmoothScroll'];

2.メソッドを設定

上記で取得したvueSmoothScrollを Vue.use に取り込みます。

Vue.use(vueSmoothScroll);
new Vue({
  el: '#app'
});
 

3. テンプレートを準備

aタグにv-smooth-scrollプロパティを設定します。

[注意] サンプルはケバブケースで記載しています。

<div id="app">
  <p>↓↓↓↓ Scroll!! ↓↓↓↓</p>
  <div style="height: 1500px"></div>
  <a href="#app" v-smooth-scroll>Go To #app</a>
</div>

サンプル

>>専用ページで確認する

さいごに

シンプルなVue.jsスムーススクロールライブラリでした。

今日はこの辺でー