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	捲動多少像素後出現	number	—
right	距右側偏移 px	number	—
bottom	距底部偏移 px	number	—
smooth	是否平滑捲動	boolean	false
sx	sx 快速佈局屬性	—	—

Slots

插槽	說明
default	按鈕內容（未傳時渲染預設箭頭圖示）