スクロールした際に出現して押すとページトップまで移動できるボタンはWEBサイトでよく見ますね。記事が長い場合は便利なので本ブログでも採用しています。今回はVue3のコンポーネントとして実装してみます。単体のVueファイル(SFC: Single File Component)として作成しているので、すぐにカスタマイズして使うことができます。

前提

以下の条件でコンポーネントを作成します。

• Vueのバージョン: 3.x
• 言語: TypeScript
• ファイル形態： SFC(単一ファイルコンポーネント)
• コードスタイル：Composition API スタイル

このようなものを作ります

まず、どのようなものを作りたいのかを見てみましょう。ブログサイトなどでよく見る上に戻るためのフロートボタンです。以下にJS, CSS, HTMLで簡単に実装した例を示します。　

SFCコンポーネントの実装

今回はcompornent/ディレクトリ下にコンポーネントを作成します。FloatButton.vueファイルを作成して以下のように実装します。

<script setup lang="ts">
import {onMounted, ref, type Ref } from 'vue';

const isShow: Ref<boolean> = ref(false)

function onClickButton(): void {
  window.scrollTo({
    top: 0,
    behavior: 'smooth',
  });
}

onMounted(() => {
  window.addEventListener(
    'scroll',
    () => {
      isShow.value = (window.scrollY >= 300)
    },
    {passive: true}
  )
})
</script>

<template>
  <button id="float-button" v-on:click="onClickButton()" v-if="isShow">TOP</button>
</template>

<style>
#float-button {
  position:fixed;
  right: calc(50% - (100px / 2));
  top: calc(100% - 30px);
  height: 30px;
  width: 100px;
  background: #6274d0;
  color: white;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  z-index: 500;
}
</style>

ボタンのデザインや場所、z-indexについては適宜修正をして下さい。

コンポーネントの使い方

他のコンポーネントに依存しないので、お好きな場所でインポートして使用して下さい。例としてmain.tsから最初に呼ばれるApp.vueにインポートした例を紹介します。Composition APIを使用しているのでコンポーネントの登録は不要です。

<script setup lang="ts">
  import FloatButton from './components/FloatButton.vue'
</script>

<template>
<div class="container">
  ...
  ...
</div>
<FloatButton />
<Footer />
</template>

まとめ

本ブログ用にボタン作成したので、記事にしてみました。SFCとして独立させておくと他のプロジェクトでも使いまわしができ便利ですね。本記事が何かのお役に立てば幸いです。

尚、本記事のコードのご使用はご自身の責任でお願いいたします。