【脱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

インストール

まずは、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などに比べると後発な分、ライブラリーやプラグインの数が少ないところはありますが、増えつつあります。

他にも、「カルーセル」についてもプラグインの紹介もしているので、良かったら合わせて読んでみてはいかがでしょうか?

【脱jQuery】Vue.jsで簡単に「カルーセル」を作る方法

まとめ

トップに戻るボタンは、jQueryの得意分野なので、置き換えにくいと思われがちですが、このプラグインを使えば、簡単にVue.jsにまとめることができそうですよね。これをきっかけに、小さくVue.jsを始めるハードルが少しでも下がって、使う人が増えたら楽しいなというお話でした。

さらにVue.jsを知りたくなったと言う人は、公式ドキュメントが日本語で充実しているので、おすすめです。

本で勉強したい人は、以下の2冊がおすすめです。

こちらの本は、基本が網羅的に解説されており、最初の1冊としてはもちろん、辞書的に1冊手元にあると便利です。
こちらは、これから発売ですが、作者のmioさんはブログでもVue.jsについて分かりやすく書いてくださってるので、期待大。僕もすでに予約済みです。