回到頁面頂部（回到頂部、過渡動畫）

項目背景：
vue

1.創建 backtop.vue 的回到頂部邏輯的組件

<template>
  <transition name="back-up-fade">
    <div
      class="back-top"
      :style="{
        bottom: bottom + 'px',
        right: right + 'px',
      }"
      @click.stop="handleBackTopClick($event)"
      v-if="show"
    >
      <div class="back-text-contaner card">
        <!-- 提供了插槽顯示插槽內容 -->
        <slot v-if="$slots.default"></slot>
        <!-- 沒提供,使用預設的 -->
        <div class="default-text" v-else>
          up
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
// 導入節流函數
// import { throttle } from "./utils";
 let throttle=function(fn, intervalTime = 200, immediate = true) {
  let oldTime = Date.now();
  return function (...arg) {
    if (immediate) {
      fn.bind(this)(...arg);
      immediate = false;
    }
    let nowTime = Date.now();
    if (nowTime - oldTime >= intervalTime) {
      fn.bind(this)(...arg);
      oldTime = nowTime;
    }
  };
}

export default {
  props: {
    // 觸發滾動的容器
    target: {
      type: String,
      default: "",
    },
    // 滾動高度達到此參數值才出現
    visibilityHeight: {
      type: Number,
      default: 100,
    },
    // 控制其顯示位置, 距離頁面右邊距
    right: {
      type: Number,
      default: 270,
    },
    // 控制其顯示位置, 距離頁面底部距離
    bottom: {
      type: Number,
      default: 60,
    },
  },
  data() {
    return {
      // 滾動容器
      container: null,
      // 是否顯示
      show: false,
      // 定時器標識
      timer: null,
      // 包裹元素節點
      el: "",
    };
  },
  mounted() {
    //節流處理，避免頻繁觸發事件
    this.throttleHandleContanierScroll = throttle(
      this.handleContanierScroll,
      10,
      false
    );
    this.init();
  },
  methods: {
    init() {
      // 預設滾動元素為document
      this.container = document;
      this.el = document.documentElement;
      // 外部傳入滾動包裹元素時候
      if (this.target) {
        const el = document.querySelector(this.target);
        el ? (this.container = el && (this.el = el)) : null;
      }
      // console.log(this.container);
      this.container.addEventListener(
        "scroll",
        this.throttleHandleContanierScroll,
        false
      );
    },
    // 回到頂部點擊
    handleBackTopClick(e) {
      // 給回到頂部一定過度事件
      console.log(e,'>>>>>>>>');
      this.timer = setInterval(() => {
        this.scrollToTop();
      }, 16);
      // 通知用戶
      this.$emit("backUpClick", e);
    },
    // 滾動事件
    handleContanierScroll() {
      // 滾動超出給定高度則顯示，否則隱藏
      if (this.el.scrollTop > this.visibilityHeight) {
        this.show = true;
      } else {
        this.show = false;
      }
    },
    // 滾動到頂部
    scrollToTop() {
      if (this.el.scrollTop > 0) {
        this.el.scrollTop -= 50;
      } else {
        clearInterval(this.timer);
      }
    },
  },
  beforeDestroy() {
    // 銷毀定時器
    clearInterval(this.timer);
    this.timer = null;
  },
};
</script>

<style lang="scss">
.back-top {
  // position: fixed;
  // background-color: #fff;
  // width: 40px;
  // height: 40px;
  background: rgba(226, 243, 255, 0.8);
  border-radius: 10px 10px 10px 10px;
  border: 1px solid #BADAFD;
  padding: 10px;
  opacity: 1;

  // border-radius: 50%;
  color: #409eff;
  display: flex;
  align-items: center;
  justify-content: center;
  // font-size: 20px;
  // box-shadow: 0 0 6px rgb(0 0 0 / 12%);
  cursor: pointer;
  z-index: 999;
}
.back-up-position {
  position: relative;
}

// 過度動畫
.back-up-fade-enter-active {
  transition: opacity 0.3s linear;
}
.back-up-fade-enter {
  opacity: 0;
}
.back-up-leave-to {
  opacity: 0;
}
</style>

2.在相應的組件位置進行引用

//引入組件
import backtop from "./backtop.vue";

//註冊組件
components: { backtop },

//組件使用
<backtop :visibility-height="200" @backUpClick="handleBackUpClick">
   <span>回到頂部</span>
</backtop>

backUpClick 為點擊按鈕回到頂部後觸發的事件

進行組件封裝 可以與業務代碼進行解耦，預留插槽位置可以保留外部的樣式定製化，預留外部api的定製化操作。