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	ボタンの内容（未指定時はデフォルトの矢印アイコンをレンダリング）