# vuejs back to top button component 作成

トップに戻るボタンを軽く作ります。ライブラリー使わずに、back to top ボタンを実現します。

components/BackToTop.vue

<template>
  <div>
    <transition name="back-to-top-fade">
      <slot>
        <button
          v-show="display"
          type="button"
          class="btn btn-info back-to-top"
          :title="alt"
          :style="{ ...btnStyle, bottom: bottom + 'px', right: right + 'px' }"
          @click="toTop()"
        >
          <i class="fa fa-chevron-up"></i>
        </button>
      </slot>
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    offsetTop: {
      type: Number,
      default: 100,
    },
    alt: {
      type: String,
      default: "Back to top",
    },
    bottom: {
      type: Number,
      default: 20,
    },
    right: {
      type: Number,
      default: 20,
    },
    btnStyle: {
      type: Object,
      default: {},
    },
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  data() {
    return {
      scrollY: 0,
    };
  },
  computed: {
    display() {
      return this.scrollY && scrollY > this.offsetTop;
    },
  },
  methods: {
    handleScroll() {
      setTimeout(() => {
        this.scrollY = window.scrollY;
      }, 100);
    },
    toTop() {
      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    },
  },
};
</script>

<style scoped>
.back-to-top {
  position: fixed;
  width: 50px;
  height: 50px;
  padding: 10px;
  border-radius: 50%;
  z-index: 9;
  opacity: 0.8;
}
.back-to-top-fade-enter-active,
.back-to-top-fade-leave-active {
  transition: opacity 0.7s;
}
.back-to-top-fade-enter,
.back-to-top-fade-leave-to {
  opacity: 0;
}
</style>

やっていること

  1. ページロードしたら scroll イベントを監視 window.addEventListener("scroll", this.handleScroll);
  2. スクロール値が指定値超えるとボタン表示 display() {return this.scrollY && scrollY > this.offsetTop;}
  3. トップへ戻るボタン押されたらトップにスクロール toTop()

構造はシンプルでかんたん

# Props Options

Props Type Default Memo
offsetTop Number 100 px トップに戻るボタン表示するタイミング
alt String Back to top トップに戻るボタンに hover した時の表示
bottom Number 20 px ボタンが下からの表示距離
right Number 20 px ボタンが右からの表示距離
btnStyle Object {} ボタンに反映するスタイルシート
2021-12-20
  • javascript
  • vuejs

関連記事

Javascript 非同期処理 async と await のメモ
Nuxtjs 3 に Ant design Vue を使う
javascript  指定場所にスムーズにスクロールする方法
Nuxt.js と Ant Design Vue 2 テーマカスタマイズ
react 強制的にレンダリングする方法
JavaScript ライブラリ aos.js 使ってスクロール連動アニメーション
Jsconfig と Tsconfig
Cookie localStorage sessionStorage の違い
Javascript var let const 変数宣言の違い
Javascript 電話番号フォーマット
国際化 i18n と地域化 L10N
大きいファイルをスライス分割してアップロード
javascript 文字列と配列検索 indexOf findIndex find some includes 関数の違い
Javascript DataTables で excel 風 table 作る
javascript 配列 重複排除
bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー
Nuxtjs 動的なルーティング静的ページ自動生成
キーコード取得 & キーコード一覧
Sweet Alert swal に複数 content
moment.js 使って日本語曜日対応
vuejs v-if と v-show の違い
javascript 開発で出会った TypeError
開発時によく使うゼロ埋めパディング作業まとめ
ReferenceError: location is not defined
vuejs で omisejapan の決済フォーム作成した時のメモ
vuejs vuex が難しいわけではないけど覚えるのに時間かかる
ブラウザーで動く javascript のクッキー操作ライブラリ js-cookie
vuejs スクロールでナビバー表示非表示
nuxtjs vue router params query ルートから取得できるもの
vuejs 開発時に遭遇したエラーリスト
javascript reduce 連想配列の合計計算覚えよう
値段をカンマと円マーク表示 vuejs money-format filter 自作
vuejs-datepicker 使ってカレンダー表示 日本語多言語対応
スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について
nuxtjs と codeigniter で jwt システム構築
nodejs 使う時のエラーたち
javascript で作る html から PDF 変換 pdfmake の日本語対応
javascript 楽しく遊ぼう!メッセージつぶやくウシ cowsay
vue hook 使って vuejs コンポーネントライフサイクル監視
Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ
正規表現一覧 よく使う検索・置換のパターン
javascript password generator ランダム文字列パスワード作成
javascript 日本語 shift-js 対応 CSV ダウンロード
nuxt cordova web ハイブリッドアプリ作成した時のメモ
chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
開発におけるコーディングルール・規約
laravel に vuejs 使うための初期設定
polyfill という宝物で開発時の ie11 対応した時のメモ