这段代码的作用是实现返回页面顶部的功能:
<template>
<div @scroll="pageScroll">
<div @click="scrollToTop ">返回顶部 </div>
</div>
</template>
<script setup >
const scrollToTop = (scrollContainer: HTMLElement, speed: number = 10, step: number = 10) => {
// scrollContainer:要滚动的容器元素,可以是 window 或任意具有 scrollTop 属性的元素
// speed:每次滚动的距离,即返回顶部的速度,默认为 10
// step:每次滚动的时间间隔,单位为毫秒,默认为 10
let scrollTop = scrollContainer.scrollTop;
const time = setInterval(() => {
scrollTop -= speed;
if (scrollTop <= 0) {
clearInterval(time);
scrollContainer.scrollTop = 0;
} else {
scrollContainer.scrollTop = scrollTop;
}
}, step);
};
这个函数的参数更加清晰明了,也更加灵活,可以适用于不同的滚动容器和滚动速度。使用示例:
// 返回 window 顶部
scrollToTop(window, 20, 5);
// 返回某个具有 scrollTop 属性的元素顶部
const container = document.getElementById('scroll-container');
scrollToTop(container, 10, 10);
</script>