js 平滑回到顶部

 

<template>
  <div class="default-layout" id="default-layout">
    <div class="page-container">
      <!-- 回到顶部 -->
      <div class="back-top" @click="backTop" v-if="backShow">
        <i class="el-icon-arrow-up icon"></i>
        <i class="toptxt">TOP</i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DefaultLayout',
  data() {
    return {
      backShow: false
    }
  },
  mounted() {
    this.handleScroll()
    window.addEventListener('scroll', this.handleScroll, false)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      let scorllTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scorllTop > 200) {
        this.backShow = true
      } else {
        this.backShow = false
      }
    },
   backTop() {

      document.querySelector('#default-layout').scrollIntoView({

        behavior: 'smooth', // 平滑过渡

        block: 'start'

      })

}
  }
}
</script>

<style scoped lang="scss">
.page-container {
  position: absolute;
}
.back-top {
  position: fixed;
  right: 300px;
  bottom: 100px;
  width: 50px;
  height: 50px;
  background-color: #004BDF;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 0 5px 5px rgba(#004BDF, 0.3);
  .icon {
    color: #fff;
    font-size: 20px;
  }
  .toptxt {
    color: #fff;
    line-height: 1;
  }
}
</style>

方法二：平滑过渡

  backTop() {
      /**
       * 回到顶部功能实现过程：
       * 1. 获取页面当前距离顶部的滚动距离（虽然IE不常用了，但还是需要考虑一下兼容性的）
       * 2. 计算出每次向上移动的距离，用负的滚动距离除以5，因为滚动的距离是一个正数，想向上移动就是做一个减法
       * 3. 用当前距离加上计算出的距离，然后赋值给当前距离，就可以达到向上移动的效果
       * 4. 最后记得在移动到顶部时，清除定时器
       */
      var timer = setInterval(function() {
        let osTop = document.documentElement.scrollTop || document.body.scrollTop
        let ispeed = Math.floor(-osTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed
        this.isTop = true
        if (osTop === 0) {
          clearInterval(timer)
        }
      }, 30)
    }

如若按照此计算方法有bug，当滑动顶部过程中未停稳下来，此时滑动滚动条会出现页面闪动问题。

方法三：锚点定位（无过渡效果）

<template>
  <div class="default-layout" id="default-layout">
    <div class="page-container">
      <!-- 锚点回到顶部 -->
       <a class="back-top" href="#default-layout" v-if="backShow">
        <i class="el-icon-top icon"></i>
      </a> 
    </div>
  </div>
</template>

<script>
export default {
  name: 'DefaultLayout',
  data() {
    return {
      backShow: false
    }
  },
  mounted() {
    this.handleScroll()
  },
  methods: {
    handleScroll() {
      let scorllTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scorllTop > 200) {
        this.backShow = true
      } else {
        this.backShow = false
      }
    },
  }
}
</script>

<style scoped lang="scss">
.page-container {
  position: absolute;
}
.back-top {
  position: fixed;
  right: 300px;
  bottom: 100px;
  width: 50px;
  height: 50px;
  background-color: #004BDF;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 0 5px 5px rgba(#004BDF, 0.3);
  .icon {
    color: #fff;
    font-size: 20px;
  }
}
</style>

方法四：直接回到顶部（无过渡效果）

 backTop(){

        window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop = 0

}