Vue.jsで上に戻るボタンを実装する

Vue.js

はじめに

Vue.jsで下にスクロールした際に、上に戻れるボタンを実装する方法について。

上に戻るボタンを追加

まずはreturnTop()というクリックイベントを設定します。

<div class="return_top_button btn btn-secondary" @click="returnTop()">
     <font-awesome-icon icon="chevron-circle-up" />
</div>

続いてreturnTop()メソッドの処理を追加します。

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

<style scoped>
.return_top_button {
    position: fixed;
    right: 15px;
    bottom: 15px;
  }
</style>

window.scrollToメソッドを使って指定の位置までスクロールするように設定します。

behavior: 'smooth'は、ぬるっとスクロールする指定です。

デフォルトだと、一瞬でスクロールされます。

下にスクロールしたときにボタンを表示させる

続いて、下にスクロールしたときだけ、上に戻るボタンを表示させるように設定します。

<transition name="return_button"> // トランジション設定
  <div class="return_top_button btn btn-secondary" @click="returnTop()" v-show="returnTopActive">
     <font-awesome-icon icon="chevron-circle-up" />
  </div>
</transition>

v-showを使って、returnTopActiveがtrueのときのみ表示されるようにします。

<script>
export default {
  name: 'JokeIndex',
  data() {
    return {
      returnTopActive: false,
      scroll: 0,
    }
  },

  mounted() {
    window.addEventListener('scroll', this.scrollWindow)  // スクロールの際に発火
  },

  methods: {
    returnTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      }),

    scrollWindow() {

      this.scroll = window.scrollY  // 縦方向のスクロール量を取得
      if ( 100 <= this.scroll ) {
        this.returnTopActive = true
      } else {
        this.returnTopActive = false
      }
    },
  }
</script>

<style scoped>
  .return_top_button {
    position: fixed;
    right: 15px;
    bottom: 15px;
  }

// enter/leaveトランジションで滑らかに表示・非表示させる
  .return_button-enter-active, .return_button-leave-active {
    transition: opacity .5s;
  }

  .return_button-enter, .return_button-leave-to {
    opacity: 0;
  }
</style>

完成

Image from Gyazo