BackTop 맨 위로

스크롤이 임계값을 넘으면 나타나는 맨 위로 가기 버튼입니다.

맨 위로

<template>
  <div class="demo-col" style="max-width: 640px">
    <p class="demo-note">컨테이너 안에서 아래로 visibilityHeight(200px) 이상 스크롤하면 우측 하단에 맨 위로 가기 버튼이 나타납니다</p>
    <div ref="scroller" class="anchor-scroller">
      <div v-for="i in 20" :key="i" class="anchor-sec">
        <h3>제{{ i }}단</h3>
        <p>아래로 스크롤한 뒤 우측 하단 버튼을 클릭하세요.</p>
      </div>
    </div>
    <LhBackTop :target="scrollerEl" :visibility-height="200" :right="24" :bottom="24" smooth />
  </div>
</template>

<script>
export default {
  data: () => ({
    scrollerEl: undefined,
  }),
}
</script>

Props

프로퍼티	설명	타입	기본값
target	스크롤 컨테이너 (선택자 또는 요소, 기본값 뷰포트)	string \| HTMLElement	—
visibilityHeight	몇 px 스크롤한 뒤에 나타날지	number	—
right	우측 기준 오프셋 px	number	—
bottom	하단 기준 오프셋 px	number	—
smooth	부드러운 스크롤 여부	boolean	false
sx	sx 레이아웃 단축 프로퍼티	—	—

Slots

슬롯	설명
default	버튼 콘텐츠 (미전달 시 기본 화살표 아이콘 렌더링)