vue 回到頁面頂部

模仿Element-UI 回到頁面頂部

BackToTop.vue

<template>
  <transition :name="transitionName">
    <div class="page-component-up"
      @click="backToTop"
      v-show="visible"
      :style="customStyle">
      <i class="el-icon-caret-top"></i>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'BackToTop',
  props: {
    transitionName: {
      type: String,
      default: 'fade'
    },
    customStyle: {
      type: Object
    },
    visibilityHeight: { // 縱向滑動多遠距離出現滾動條
      type: Number
    },
    backPosition: { // 返回頂部時，滾動到哪里（距離頂部的距離）
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      visible: false,
      interval: null
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
    if(this.interval) {
      clearInterval(this.interval)
    }
  },
  methods: {
    handleScroll() {
      this.visible = window.pageYOffset > this.visibilityHeight
    },
    backToTop() {
      let distanceY = window.pageYOffset
      let i = 0
      this.interval = setInterval(() => {
        let next = Math.floor(this.easeInOutQuad(10 * i, distanceY, -distanceY, 500))
        if(next <= this.backPosition) {
          window.scrollTo(0, this.backPosition)
          clearInterval(this.interval)
        } else{
          window.scrollTo(0, next)
        }
        i++
      }, 17)
    },
    /*
      緩動公式（Tween算法）
       t: 動畫已經執行的時間（實際上時執行多少次/幀數）
       b: 起始位置
       c: 終止位置
       d: 從起始位置到終止位置的經過時間（實際上時執行多少次/幀數）

      http://www.cnblogs.com/mrsunny/archive/2011/06/21/2086080.html
    */
    easeInOutQuad(t, b, c, d) {
      // 判斷當前時間是否總在總時間的一半以內，是的話執行緩入函數，否則的話執行緩出函數
      if ((t /= d / 2) < 1) { 
        return c / 2 * t * t + b
      } else {
        // 將總長度設置為一半，並且時間從當前開始遞減，對圖像進行垂直向上平移
        return -c / 2 * (--t * (t - 2) - 1) + b
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.page-component-up{
  position: fixed;
  cursor: pointer;
  text-align: center;
  transition: .3s;
  box-shadow: 0 0 6px rgba(0,0,0,.12);
  z-index: 99;
  i{
    color: #409eff;
    display: block;
    line-height: inherit;
    text-align: center;
    font-size: 18px;
  }
}
</style>

頁面引用：

<template>
  <div>
    <h1>返回頂部</h1>
    <div>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
      <el-alert title="山桃紅花滿上頭，蜀江春水拍山流。" type="success"></el-alert>
    </div>
    <el-tooltip placement="top" content="返回頂部">
      <back-to-top 
        transitionName="fade"
        :customStyle="myBackToTopStyle" 
        :visibilityHeight="300" 
        :backPosition="50">
      </back-to-top>
    </el-tooltip>
  </div>
</template>

<script>
import BackToTop from '@/components/BackToTop'

export default {
  data() {
    return {
      myBackToTopStyle: {
        'right': '100px',
        'bottom': '150px',
        'width': '40px',
        'height': '40px',
        'border-radius': '20px',
        'line-height': '40px', 
        'background': '#fff'
      }
    }
  },
  components: {
    BackToTop
  }
}
</script>

展示效果：

 

demo 地址：https://github.com/frwupeng517/element-admin/blob/master/src/components/BackToTop.vue