vue封装回到顶部

vue封装回到顶部

home.vue

<template>
  <div>
    <p v-for="(item, index) in 200" :key="index">{{ item }}</p>
    <Gotop @Gotop="click_gotop"></Gotop>
  </div>
</template>

<script>
import Gotop from "../components/Gotop";
export default {
  components: {
    Gotop,
  },
  methods: {
    click_gotop() {
      //设置计时器来实现一个缓冲的效果
      var timer = setInterval(function () {
        //当前滚动的距离
        let osTop =document.documentElement.scrollTop || document.body.scrollTop;
        //计算滚动速度  滚动的距离/5（数值越大滚的事件越长） 去除小数 
        let ispeed = Math.floor(-osTop / 5);
        //开始滚动，滚动距离在上边定义为负的了  所以osTop+负的速度 也就是osTop-速度
        document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
        this.isTop = true;
        if (osTop === 0) {
          clearInterval(timer);
        }
        //过渡动画的速度 数值过大会出现卡顿现象
      }, 30);

      // 整体思路：每隔30毫秒 向上滚动的距离=总的滚动距离-滚动的速度
      // 例如： 总的距离是1000   滚动速度-1000/5=-200    所以 每30毫秒向上滚动距离为1000-200=800
      //也就是第一次滚动的最大 然后 逐渐慢下来
    },
  },
};
</script>

<style scoped>
p {
  text-align: center;
  font-size: 25px;
}
</style>

Gotop.vue （子组件）

<template>
  <div class="box" @click="Gotop" ref="boxx">
    <div>
      <slot></slot>
    </div>
    <div>
      {{ this.text }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: "返回顶部",
    },
  },
  data() {
    return {};
  },
  mounted() {
    window.addEventListener("scroll", this.change);
  },
  methods: {
    change() {
      //这里是为了实现弹出层过渡效果
      if (document.documentElement.scrollTop > 645) {
        this.$refs.boxx.style.transition = "width 2s ";
        this.$refs.boxx.style.width = "20%";
        this.$refs.boxx.style.right = "0";
      } else {
        this.$refs.boxx.style.transition = "width 2s ";
        this.$refs.boxx.style.width = "0";
        this.$refs.boxx.style.right = "-3%";
      }
    },
    //点击返回顶部
    Gotop() {
      //设置一个定时机器来实现缓冲效果
      var timer = setInterval(function () {
        //当前距离顶部的高度
        let osTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        //速度：当前滚动的高度/5 加上-号 和 去除小数 就是速度  这个值在缓冲过程中会越来越小
        //例如 滚动到3000时 点击回到顶部  这个时候 开始第一次滚动 每30毫米滚动的距离是3000-600=2400
        //                                           第二次滚动 每30毫秒滚动距离2400-480=1920
        // 第三次   每30毫秒滚动距离1920-384=1536
        //。。。。。。依次递减
        let ispeed = Math.floor(osTop / 5);
        //开始滚动                      2000-400 = 1600
        document.documentElement.scrollTop = document.body.scrollTop =
          osTop - ispeed;

        //滚动距离为0清除计时器
        if (osTop < 5) {
          document.documentElement.scrollTop = 0;
          clearInterval(timer);
        }
        //过渡动画的速度 数值过大会出现卡顿现象
      }, 30);
    },
  },
};
</script>

<style scoped>
.box {
  border: 1px solid red;
  position: fixed;
  text-align: center;
  top: 70%;
  width: 0;
  right: -5%;
  white-space: nowrap;
  padding: 1%;
}
.box img {
  width: 20%;
  height: 20%;
}
</style>

整体思路：每隔30毫秒 向上滚动的距离=总的滚动距离-滚动的速度

例如： 总的距离是1000 滚动速度-1000/5=-200 所以 每30毫秒向上滚动距离为1000-200=800

也就是第一次滚动的最大 然后 逐渐慢下来