これは Vue.js #3 Advent Calendar 2017 – Qiita 2日目の記事です。
この記事では、Vue.jsで簡単に「トップへ戻るボタン」を作る方法をご紹介します。
Vue.jsは、小さくも始められるjsフレームワークです。
なので、「とりあえずjQueryでやってたことを置き換えてみる。」と言った使い方もできます。
ただ、今までjQueryぐらいしか使ってなかった僕と同じjavascript初心者の方だと、「トップへ戻るボタン」のアニメーションが置き換えられず、結局jQueryに戻ってしまったという方も多いのではないでしょうか？
その悩みを簡単に解決するのが、Vue.js用のプラグイン「Vue-scroll」です。
このプラグインを使うことで、脱jQueryに一歩近づけます。
気軽にスクロールアニメーションができる「vue-scrollto」
インストール
まずは、vue-scrollをインストールします。
コンソールで以下のコマンドを入力します。
npm install --save vue-scrollto
そして、読み込みます。
javascript
import Vue from 'vue' import vue-scrolltop from 'vue-scrolltop' Vue.component(vue-scrolltop)
気軽に使いたい場合は、htmlの中に、下記のコードを追加しCDNを読み込みます。今回のデモもこちらの方法でやっていきます。
html
<script src="https://unpkg.com/vue@2.2.4"></script> <script src="https://unpkg.com/vue-scrollto"></script>
使い方
使い方は、簡単。
まず、Vue コンストラクタ関数を new してルートのインスタンスを作成します。
Javascript
new Vue({
el: "#app"
});
html
<div id="app"> <a href="#" id="return-top" >Top</a> <div id="top">Hi. I'm #top</div> </div>
次に、トップへ戻るボタンを実装していきます。
このプラグインを追加すると、Vue.js の独自の属性（ディレクティブ）（v-onとかv-bindとか）と同じように、v-scroll-to属性が使えるようになります。
なので、ボタンにv-scroll-to属性を追加し、アニメーションして移動したid名を指定するだけ。
html（上のhtmlに追記）
<div id="app"> <a href="#" id="return-top" v-scroll-to="'#top'">Top</a> <div id="top">Hi. I'm #top</div> </div>
たったこれだけで、Vueを使って、Topに戻るボタンが作れました。
CSSで見た目を整えてやった実際に動くサンプルがこれです。
See the Pen Vue-scrollto by MASATOSHI HANAI (@hanahana0201) on CodePen.
ちなみに、僕のホームページのトップに戻るボタンもこのプラグインで作っています。
カスタマイズも簡単！イージングも思いのまま
僕は、このデフォルトの動きで満足しているのですが、
イージングやデュレーションに関しても、オプションで簡単にカスタマイズできます。
なので、もっと動きにこだわりたい！って人にも便利に使えるプラグインです。
詳細については、vue-scrollの公式ドキュメント（英語）を見てみてください。
他にも便利なプラグインがあります
jQueryなどに比べると後発な分、ライブラリーやプラグインの数が少ないところはありますが、増えつつあります。
他にも、「カルーセル」についてもプラグインの紹介もしているので、良かったら合わせて読んでみてはいかがでしょうか？
masatoshihanai.comまとめ
トップに戻るボタンは、jQueryの得意分野なので、置き換えにくいと思われがちですが、このプラグインを使えば、簡単にVue.jsにまとめることができそうですよね。これをきっかけに、小さくVue.jsを始めるハードルが少しでも下がって、使う人が増えたら楽しいなというお話でした。
さらにVue.jsを知りたくなったと言う人は、公式ドキュメントが日本語で充実しているので、おすすめです。
本で勉強したい人は、以下の2冊がおすすめです。
