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
也就是第一次滚动的最大 然后 逐渐慢下来