よく右下に出てくる一番上まで戻るボタンがほしいなと思い、やってみたときの備忘録。

トップに戻るボタンほしいなと思ったら、簡単につけれた！Vueすごい...(*´ω｀*) pic.twitter.com/dRlanENnxd
— きらぷか📚積読ハウマッチ開発中【事前登録はじめました】 (@kira_puka) July 6, 2019

主な流れ

スクロールイベントに関数を登録
登録した関数で、スクロールされたら位置を保存しておく
位置が一定以上になったらボタンを表示する
ボタンが押されたら上に移動する

こんな感じ。

1~3については、コンポーネントで完結するパターンもあるし、
カスタムディレクティブでやるパターンもあるっぽい

コンポーネント完結パターン

こんな感じ。

mountedで、window.addEventListenerで登録
handleScrollでスクロールされたらpositionに保存
v-if="position > 500"で一定以上になったら表示

<template>
  <section class="container">
    <nuxt />
    <!-- Scroll Top Button -->
    <div class="btn-scrolltop" v-if="position > 500">
      <!-- 上に戻るボタン(中身は省略) -->
    </div>
    <!-- /Scroll Top Button -->
  </section>
</template>

<script lang="ts">
import { Component, Vue } from "nuxt-property-decorator";

@Component
export default class extends Vue {
  position: number = 0;
  
  mounted() {
    if (!process.browser) return;
    this.$nextTick(() => {
      window.addEventListener("scroll", this.handleScroll);
    });
  }
  
  handleScroll() {
    this.position = window.scrollY;
  }
}
</script>

カスタムディレクティブを使うパターン

あまり変わらないけど、最初だけ違う感じ、ちょっと手間だけど、複数箇所で使うなら、良いかも。

v-scroll="handleScroll"で、window.addEventListenerで登録
handleScrollでスクロールされたらpositionに保存
v-if="position > 500"で一定以上になったら表示

ディレクティブのプラグインを用意する

plugins/v-scroll.tsを用意して、
v-scrollでスクロールイベントを検知できるようにする。

import Vue from "vue";

Vue.directive("scroll", {
  inserted: function(el, binding) {
    let f = function(evt) {
      if (binding.value(evt, el)) {
        window.removeEventListener("scroll", f);
      }
    };
    window.addEventListener("scroll", f);
  }
});

ディレクティブを使ってボタンのスクロール位置を取得

<template>
  <section class="container" v-scroll="handleScroll">
    <nuxt />

    <div class="btn-scrolltop" v-if="position > 500">
      <!-- 上に戻るボタン(中身は省略) -->
    </div>
  </section>
</template>

<script lang="ts">
import { Component, Vue } from "nuxt-property-decorator";

@Component
export default class extends Vue {
  position: number = 0;

  handleScroll() {
    this.position = window.scrollY;
  }
}
</script>

ボタンで一番上に戻る処理は`vue-scrollto`で

上へ移動するとかはvue-scrolltoが便利なので、それを使う感じに♪
fade transionも合わせるとこんな感じでOK

<transition name="fade">
  <div class="btn-scrolltop" v-if="position > 500">
    <a class="button" v-scroll-to="'body'">
      <span class="icon">
        <i class="fas fa-lg fa-arrow-up"></i>
      </span>
    </a>
  </div>
</transition>