vue-scrolltoで超簡単にページ内リンクのスムーススクロールを実現する

ページ内リンクでぬるっとスクロールするやつを実装したく、vue-scrolltoというライブラリを試してみました。
するとめちゃめちゃ簡単に実装できましたので、メモ程度に共有します。

vue-scrolltoをインストールする

まずは普通にインストールします

npm install --save vue-scrollto

vue-scrolltoをインポートする

僕はLaravel×vue.jsを使っているので、app.jsにインポートします。

import VueScrollTo from 'vue-scrollto'
 
Vue.use(VueScrollTo)

vue-scrolltoを使用してページ内リンクのスムーススクロールを実現する

ボタンと、移動したい先の要素を作成します

<button>ここから移動する</button>

.
.
.

<h1 id="#bottom">ここまで移動する</h1>

これに、 v-scroll-to属性 を入れてあげるだけですみます！
では、早速実装してみます

<button v-scroll-to="'#bottom'">ここから移動する</button>

.
.
.

<h1 id="#bottom">ここまで移動する</h1>
.
.
.

こんな感じでv-scroll-toにIDを指定してあげるだけです。

これだけでページ内リンクのスムーススクロールが完成しました！
ライブラリを使うと自分で実装しなくて良いというところと記述が簡素になることが嬉しいですね。

皆さんもぜひ試してみてください。