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

2018年11月1日 2019年11月13日

環境

Vue.js: 2.5.17

vue-go-top: 1.0.2

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

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

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

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

かなり簡単です。

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

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

// ライブラリの呼び出し
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`	`String`, `Number`	`50`	ウィンドウの右側からのボタンの表示位置を指定
`:bottom`	`String`, `Number`	`100`	ウィンドウの下側からのボタンの表示位置を指定
`:bottom-gap`	`String`, `Number`	`0`	ウィンドウの下側からのボタンの表示位置をギャップを指定
`:z-index`	`Number`	`1000`	ボタンのz-indexを指定
`fg-color`	`String`	`#ffffff`	ボタンのテキストの色を指定
`bg-color`	`String`	`#ffc966`	ボタンの背景色を指定
`:radius`	`String`, `Number`	`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を狂喜乱舞しながら、社内に布教中です。