gil/web-temp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix. scrollTop 버튼 수정

Browse Source
This commit is contained in:
clkim
2025-10-24 17:13:02 +09:00
parent 34605d606a
commit 40886828fd
9 changed files with 96 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
layers/components/atoms/Button/ScrollTop.vue
View File

@@ -1,31 +1,8 @@
<script setup lang="ts">
interface Props {
parentRef: HTMLElement | null
}
const props = defineProps<Props>()
const { y: windowY } = useWindowScroll({ behavior: 'smooth' })
const { height: viewportH } = useWindowSize()
const parentEl = toRef(props, 'parentRef')
const { bottom: parentBottom } = useElementBounding(parentEl)
const showBtn = computed(() => windowY.value > 0)
const offsetY = 12
const pinToParent = computed(() => {
if (!parentBottom.value) return false
return parentBottom.value <= viewportH.value - offsetY
})
const positionClasses = computed(() =>
pinToParent.value
? 'absolute bottom-[12px] right-[12px] md:bottom-[40px] md:right-[40px]'
: 'fixed bottom-[12px] right-[12px] md:bottom-[40px] md:right-[40px]'
)
const handleScrollToTop = () => {
windowY.value = 0
}
@@ -33,11 +10,7 @@ const handleScrollToTop = () => {
<template>
<Transition name="fade">
<button
v-if="showBtn"
:class="['btn-top', positionClasses]"
@click="handleScrollToTop"
>
<button v-if="showBtn" class="btn-top" @click="handleScrollToTop">
<AtomsIconsTopLine class="icon-top" />
<span class="sr-only">top</span>
</button>
@@ -46,7 +19,7 @@ const handleScrollToTop = () => {
<style scoped>
.btn-top {
@apply rounded-full flex items-center justify-center bg-black/20 z-[100]
@apply relative rounded-full flex items-center justify-center bg-black/20 z-[100]
w-[40px] h-[40px] md:w-[48px] md:h-[48px]
before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:border before:border-[rgba(255,255,255,0.06)] before:rounded-full before:transition-all before:duration-300 before:ease-in-out
after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:rounded-full after:opacity-0 after:transition-all after:duration-300 after:ease-in-out;