Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
11
Help us understand the problem. What is going on with this article?
@TK-C

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を設定することで、フワッと表示させることができます。

ezgif.com-video-to-gif.gif

11
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
TK-C
Frontend/WebDesign

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
11
Help us understand the problem. What is going on with this article?