【论术】 复盘-回顶按钮以及功能

项目的回顶按钮以及功能，顺滑滚动/当前处于第一屏内不展示

<template><div class="back-top" :class="{ visible: isVisible }"><a @click="scrollToTop" title="回到顶部"><SvgIcon iconClass="arrowTop" style="font-size: 22px; color: #fff" /></a></div>
</template><script>
import SvgIcon from "@/components/SvgIcon.vue";
export default {name: "BackToTop",props: {// 要监听的滚动元素IDscrollElementId: {type: String,required: true,},// 滚动阈值，超过此值显示按钮scrollThreshold: {type: Number,default: 50,},// 滚动动画持续时间（毫秒）scrollDuration: {type: Number,default: 500,},},components: {SvgIcon,},data() {return {isVisible: false,scrollElement: null,};},mounted() {// 获取滚动元素this.scrollElement = document.getElementById(this.scrollElementId);if (this.scrollElement) {// 添加滚动事件监听this.scrollElement.addEventListener("scroll", this.handleScroll);} else {console.warn(`BackToTop: 未找到ID为"${this.scrollElementId}"的元素`);}},beforeDestroy() {// 移除滚动事件监听if (this.scrollElement) {this.scrollElement.removeEventListener("scroll", this.handleScroll);}},methods: {handleScroll() {// 检查滚动位置this.isVisible = this.scrollElement.scrollTop > this.scrollThreshold;},scrollToTop() {// 平滑滚动到顶部const startPosition = this.scrollElement.scrollTop;const startTime = performance.now();const animateScroll = (currentTime) => {const elapsed = currentTime - startTime;const progress = Math.min(elapsed / this.scrollDuration, 1);// 使用缓动函数使滚动更自然const easeInOutCubic = (t) =>t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;this.scrollElement.scrollTop = startPosition * (1 - easeInOutCubic(progress));if (progress < 1) {requestAnimationFrame(animateScroll);}};requestAnimationFrame(animateScroll);},},
};
</script><style scoped>
.back-top {width: 46px;height: 46px;position: fixed;bottom: 60px;right: 14px;z-index: 1000;opacity: 0;transition: opacity 0.5s ease;pointer-events: none;
}.back-top.visible {opacity: 1;pointer-events: auto;
}.back-top a {display: block;width: 46px;height: 46px;background: #0052d9;text-align: center;height: 46px;border-radius: 50%;text-decoration: none;font-size: 28px;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);transition: all 0.3s ease;cursor: pointer;
}/* 响应式设计 */
/* @media (max-width: 768px) {.back-top {bottom: 20px;right: 20px;}.back-top a {width: 46px;height: 46px;line-height: 46px;font-size: 24px;}
} */
</style>

父组件使用：

<BackUp scroll-element-id="homeRef" :scroll-duration="600" /> 

以上。