検索お得なブラックフライデーのセール情報まとめました!Web制作、デザイン、VRを中心に日々学んだ知識を配信中。この記事では、Vue.jsで簡単に「トップへ戻るボタン」を作る方法をご紹介します。Vue.jsは、小さくも始められるjsフレームワークです。「とりあえずjQueryでやってたことを置き換えてみる。」と言った使い方もできます。今までjQueryぐらいしか使ってなかった僕と同じjavascript初心者の方だと、「トップへ戻るボタン」のアニメーションが置き換えられず、結局jQueryに戻ってしまったという方も多いのではないでしょうか?その悩みを簡単に解決するのが、Vue.js用のプラグイン「Vue-scroll」です。このプラグインを使うことで、脱jQueryに一歩近づけます。気軽にスクロールアニメーションができる「vue-scrollto」インストール使い方カスタマイズも簡単!イージングも思いのまま他にも便利なプラグインがありますまとめ気軽にスクロールアニメーションができる「vue-scrollto」vue-scrollインストールまずは、vue-scrollをインストールします。コンソールで以下のコマンドを入力します。vue-scrolltoそして、読み込みます。'vue-scrolltop'Vue.component(vue-scrolltop)気軽に使いたい場合は、htmlの中に、下記のコードを追加しCDNを読み込みます。今回のデモもこちらの方法でやっていきます。ルートのインスタンスを作成します。</div>次に、トップへ戻るボタンを実装していきます。独自の属性(ディレクティブ)(v-onとかv-bindとか)と同じように、v-scroll-to属性が使えるようになります。ボタンにv-scroll-to属性を追加し、アニメーションして移動したid名を指定するだけ。</div>たったこれだけで、Vueを使って、Topに戻るボタンが作れました。CSSで見た目を整えてやった実際に動くサンプルがこれです。CodePen.ちなみに、僕のホームページのトップに戻るボタンもこのプラグインで作っています。カスタマイズも簡単!イージングも思いのまま僕は、このデフォルトの動きで満足しているのですが、イージングやデュレーションに関しても、オプションで簡単にカスタマイズできます。動きにこだわりたい!って人にも便利に使えるプラグインです。詳細については、vue-scrollの公式ドキュメント(英語)を見てみてください。他にも便利なプラグインがありますjQueryなどに比べると後発な分、ライブラリーやプラグインの数が少ないところはありますが、増えつつあります。他にも、「カルーセル」についてもプラグインの紹介もしているので、良かったら合わせて読んでみてはいかがでしょうか?【脱jQuery】Vue.jsで簡単に「カルーセル」を作る方法この記事では、Vue.jsで簡単に「カルーセル」を作る方法をご紹介します。Vue.jsは、小さくも始められる...masatoshihanai.comまとめトップに戻るボタンは、jQueryの得意分野なので、置き換えにくいと思われがちですが、このプラグインを使えば、簡単にVue.jsにまとめることができそうですよね。これをきっかけに、小さくVue.jsを始めるハードルが少しでも下がって、使う人が増えたら楽しいなというお話でした。Vue.jsを知りたくなったと言う人は、公式ドキュメントが日本語で充実しているので、おすすめです。本で勉強したい人は、以下の2冊がおすすめです。2018-03-28Kindleで探すこちらの本は、基本が網羅的に解説されており、最初の1冊としてはもちろん、辞書的に1冊手元にあると便利です。2018-05-29Amazonで探すhontoで探す紀伊國屋書店で探すこちらは、これから発売ですが、作者のmioさんはブログでもVue.jsについて分かりやすく書いてくださってるので、期待大。僕もすでに予約済みです。プログラミング、ブログ、VRにハマってます。DTPとWebは実務経験なしから仕事を獲得し、3人の子育てにも参加しつつ、在宅でバタバタな生活してます。Web、VR、フリーランスの生活を中心に発信します。