Written by Kasumi

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でページ内トップへ戻るボタンを設置する方法について紹介しました。

以上で解説を終わります。

関連記事

Vue.js

【簡単】Vue.jsとCSSを使ってハンバーガーメニューを実装する方法

2022.09.16
94
Vue.js

Vue.jsでfadeIn、fadeOutするアニメーションを実装する方法

2022.09.22
82
Vue.js

Vue.jsで日本語カレンダー入力を実装する方法【Vue 3 Datepickerライブラリ】

2022.09.24
89
Vue.js

【Vue.js】v-modelを使いselectの値を取得。初期値を設定する方法

2022.09.25
80