【脱jQuery】Vue.jsで簡単に「トップへ戻るボタン」を作る方法

こんにちは、花井です。

これは 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

htmlの中に、下記のコードを追加します。

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の得意分野なので、置き換えにくいと思われがちですが、このプラグインを使えば、簡単にVue.jsにまとめることができそうですよね。

これをきっかけに、小さくVue.jsを始めるハードルが少しでも下がって、使う人が増えたら楽しいなというお話でした。