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

vue-smooth-scrollとは

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

 

環境

Vue	2.6.10
vue-smooth-scroll	1.0.13

インストール

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

npm

npm install --save vue-smooth-scroll

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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スムーススクロールライブラリでした。

 

今日はこの辺でー