Vue.jsでページ内トップへ戻るボタンを設置する方法
Vue.jsを使ってページ内トップへ戻るボタンを設置したい。
本記事ではこの様な悩みを解決。
実装方法について解説します。
実装サンプル
See the Pen
Vue.jsでページ内トップに戻るボタンを設置 by Kohei (@kouk05)
on CodePen.0
実装サンプルです。
ページを少しスクロールしたら、ページ内トップへ戻るボタンが出現。
クリックするとページ上部へスムーススクロールされます。
実装手順は以下の通りです。
CDNを読み込む
<!-- vue -->
<script src="https://unpkg.com/vue@next"></script>
<!-- vue-scrollto読み込み -->
<script src="https://cdn.jsdelivr.net/npm/vue-scrollto"></script>
本記事ではCDNを使います。
まずは実装環境にVueとvue-scrolltoライブラリを読み込みます。
HTMLを準備
<div id="app">
<!-- アンカー -->
<div id="pagetop"></div>
<!-- topへ戻るボタン -->
<div v-scroll-to="anchor" v-show="active" class="topbtn">TOP</div>
</div>
HTMLを用意します。
ページトップに任意のID要素を挿入。
トップへ戻るボタンを作成。
属性にv-scroll-to、v-showディレクティブを付与します。
Vue.jsでトップへ戻るボタンを実装
const app = Vue.createApp({
data() {
return {
//アンカーを指定
anchor: "#pagetop",
//最初は非表示
active: false,
}
},
mounted() {
window.addEventListener('scroll', this.scrollWindow);
},
methods: {
scrollWindow() {
const top = 100 //100pxスクロールしたらボタンを出す
this.scroll = window.scrollY //topからの現在地
if (top <= this.scroll) {
this.active = true
} else {
this.active = false
}
}
}
});
// vue-scrolltoを実行
app.use(VueScrollTo);
app.mount("#app");
Vue.jsでトップへ戻るボタンの実装コード例です。
dataメソッドに前章で定義したディレクティブの値を定義。
anchorにはページトップに挿入したIDを入れます。
v-showの値は最初falseを指定します。
mountedメソッド内にwindow.addEventListener scrollメソッドを定義。
スクロールを検知します。
methodsオプション内で上記メソッドが実行されたら、topからのスクロール値を取得。
指定したスクロール量（変数top）を超えたらv-showディレクティブの真偽値を変更。
トップへ戻るボタン要素をスクロール量によって表示・非表示にします。
以上で実装完了です。
まとめ
Vue.jsでページ内トップへ戻るボタンを設置する方法について紹介しました。
以上で解説を終わります。
目次