「vue-go-top」でページトップに戻るボタンを3分で実装でする

2018年11月1日

環境

Vue.js: 2.5.17

vue-go-top: 1.0.2

 

はじめに

今回は、Vue.jsで実装するページトップに移動するボタンを設置するライブラリのご紹介です。

スクロールするとふわっとボタンが表示されます。

 

 

 

 

 

デモ

公式デモ

http://sandbox.serendip.ws/vue-go-top.html

 

簡易デモ

See the Pen vue-go-top by カバの樹 (@kabanoki) on CodePen.0

 

 

ダウンロード

https://github.com/inotom/vue-go-top

 

 

サンプルを実装

早速、サンプルを実装してみます。

かなり簡単です。

 

CDNを実装

<script src="https://cdn.jsdelivr.net/gh/inotom/[email protected]/dist/vue-go-top.min.js"></script>

 

HTMLを実装

<div id="app">
  <p v-for="item in List">{{item}}</p>
  <go-top>TOP</go-top>
</div>

 

Vueを実装

// ライブラリの呼び出し
Vue.use(GoTop);

new Vue({
  el: '#app',
  data: {
    List: [
      1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20
    ]
  }
});

 

これだけです。

ね? 簡単でしょ?

 

プロパティ

name type defaults description
:size Number 70 幅/高さのpxを設定する
:right StringNumber 50 ウィンドウの右側からのボタンの表示位置を指定
:bottom StringNumber 100 ウィンドウの下側からのボタンの表示位置を指定
:bottom-gap StringNumber 0 ウィンドウの下側からのボタンの表示位置をギャップを指定
:z-index Number 1000 ボタンのz-indexを指定
fg-color String #ffffff ボタンのテキストの色を指定
bg-color String #ffc966 ボタンの背景色を指定
:radius StringNumber 50% ボタンの丸みを指定
weight String normal ボタンの文字の太さを指定
ripple-bg String rgba(255, 255, 255, .5) ripple animation の色を指定
:boundary Number 200 要素が表示される最上位位置
:max-width Number 640 メディアクエリの max-width(px)を指定
src String null 画像のURLを指定
alt String `` 画像のalternativを指定する
:has-outline Boolean true フォーカスしたときの輪郭を表示する

 

設定例

プロパティは<go-top>に指定する。


<go-top
:size="100"
:right="50"
:bottom="30"
alt="TOP">
TOP
</go-top>

 

いかがでしょうか?
今日はこの辺でー

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-vue.js
-, , , , , ,