feat(backTop): 添加回顶组件

src/components/t-backTop.vue

@@ -0,0 +1,79 @@
+<template>
+	<transition name="fade">
+		<div class="back-top" v-show="canTop" @click="handleScrollTop">
+			<img src="../assets/icons/arrow-top.svg" class="back-icon" alt="back-icon" />
+		</div>
+	</transition>
+</template>
+<script lang="ts" setup>
+// vue
+import { ref, onMounted } from "vue";
+
+const scrollTop = ref(0); //滚动条距离顶部的距离
+const canTop = ref(false); //默认不显示
+
+// 监听滚动事件
+function handleScroll() {
+	scrollTop.value = document.documentElement.scrollTop || document.body.scrollTop;
+	canTop.value = scrollTop.value > 500;
+}
+
+// 点击回到顶部
+function handleScrollTop() {
+	let timer = 0;
+	cancelAnimationFrame(timer);
+	timer = requestAnimationFrame(function fn() {
+		if (scrollTop.value > 0) {
+			scrollTop.value -= 50;
+			document.body.scrollTop = document.documentElement.scrollTop = scrollTop.value;
+			timer = requestAnimationFrame(fn);
+		} else {
+			cancelAnimationFrame(timer);
+			canTop.value = false;
+		}
+	});
+}
+
+// 监听滚动事件
+// @ts-ignore
+onMounted(() => {
+	window.addEventListener("scroll", handleScroll);
+});
+</script>
+
+<style scoped>
+.back-top {
+	position: fixed;
+	right: 0.4rem;
+	bottom: 1rem;
+	width: 60px;
+	height: 60px;
+	border-radius: 50%;
+	border: 0;
+	transition: all 0.3s;
+}
+
+.back-top :hover {
+	border: 5px solid #4b5366;
+	border-radius: 50%;
+	cursor: pointer;
+	transition: all 0.3s;
+}
+
+.back-icon {
+	transition: all 0.3s;
+	width: 60px;
+	height: 60px;
+}
+
+/* 动画 */
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.5s;
+}
+
+.fade-enter,
+.fade-leave-to {
+	opacity: 0;
+}
+</style>