Vue-------返回顶部功能

简单记录一下返回顶部功能

html

   <div
   	 class="toTop"
   	 v-show="toTop_show"
   	 @mouseenter="show_toTop_txt"
   	 @mouseleave="show_toTop_icon"
   	 title="返回顶部"
   	 @click="backTop"
   	>
      <i
      	class="iconfont icon-Icon_Outline_Arrow_Up toTopBtnIcon"
         v-show="show_toTopBtnIcon"
       >
       </i>
      <span class="toTopBtn_txt" v-show="show_toTopBtn_txt">顶部</span>
    </div>

js

	  //1. data()
      toTop_show: false,
      show_toTopBtnIcon: true,
      show_toTopBtn_txt: false
	  // 2. mounted()
	  window.addEventListener('scroll', this.control_toTopBtn_show, true)

	  // 3. methods()
	  control_toTopBtn_show() {
	  //this.$refs.dynamicRef.$el.offsetParent是可滚动那个盒子的父盒子（谁是可视区域获取谁）
      	if (this.$refs.dynamicRef.$el.offsetParent.scrollTop > 150) {
         this.toTop_show = true
        } else {
         this.toTop_show = false
       }
     },
     show_toTop_txt() {
      this.show_toTopBtn_txt = true
      this.show_toTopBtnIcon = false
    },
    show_toTop_icon() {
      this.show_toTopBtn_txt = false
      this.show_toTopBtnIcon = true
    },
    backTop() {
      const that = this
      const timer = setInterval(() => {
        const ispeed = Math.floor(-that.$refs.dynamicRef.$el.offsetParent.scrollTop / 5)
        that.$refs.dynamicRef.$el.offsetParent.scrollTop = that.$refs.dynamicRef.$el.offsetParent.scrollTop + ispeed
        if (that.$refs.dynamicRef.$el.offsetParent.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 16)