Vue(Nuxt.js)でTopへ戻るボタンを実装する方法【ライブラリ使用無し】

Vue(Nuxt.js)でTopへ戻るボタンを実装する方法になります。
ライブラリ等は使用しないので、導入もしやすいかと思います。

クリックイベントを設定する

ReturnTopButton

<template>
  <div>
    <button @click="returnTop">
      Topへ戻る
    </button>
  </div>
</template>

まずは、コンポーネントを作り、クリックイベントを設定します。

methodsでTopへ戻る処理を実行

ReturnTopButton

<template>
  <div>
    <button @click="returnTop">
      Topへ戻る
    </button>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  methods: {
    returnTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      })
    }
  }
})
</script>

window.scrollToメソッドを使用して、Topへ戻す処理をしています。
behavior: smoothとオプションを指定することで、スムーズスクロールさせることができます。
behavior: auto だと一瞬で移動します。

スクロールしたらTopへ戻るボタンが表示するようにする

初期表示では、Topへ戻るボタンを表示させずに、ある程度スクロールしたら表示させる方法です。

ReturnTopButton

<template>
  <div>
    <button v-show="buttonActive" @click="returnTop">
      Topへ戻る
    </button>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  data() {
    return {
      buttonActive: false,
      scroll: 0
    }
  },
  mounted() {
    window.addEventListener('scroll', this.scrollWindow)
  },
  methods: {
    returnTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      })
    },
    scrollWindow() {
      const top = 100 // ボタンを表示させたい位置
      this.scroll = window.scrollY
      if (top <= this.scroll) {
        this.buttonActive = true
      } else {
        this.buttonActive = false
      }
    }
  }
})
</script>

v-showを使い、スクロールの条件を満たしたらTopへ戻るボタンが表示されるように処理を追加しています。

ボタン表示にアニメーションをつける

Topへ戻るボタン出現時にアニメーションをつけることも可能です。
その場合は、transitionを使います。

ReturnTopButton

<template>
  <div>
    <transition name="button">
      <button v-show="buttonActive" @click="returnTop">
        Topへ戻る
      </button>
    </transition>
  </div>
</template>

<style lang="scss" scoped>
.button-enter-active,
.button-leave-active {
  transition: opacity 0.5s;
}
.button-enter,
.button-leave-to {
  opacity: 0;
}
</style>

transitionを使うことで、アニメーションを簡単につけることができます。
上記の例だとopacityを設定することで、フワッと表示させることができます。