BackTop 上に戻る

スクロールがしきい値を超えると表示され、クリックで先頭に戻ります。スムーズスクロールにはネイティブの scrollTo({ behavior: 'smooth' }) を使用し、prefers-reduced-motion で自動的にダウングレードします。

基本的な使い方

vue

<script setup lang="ts">
</script>

<template>
  <!-- 基本的な使い方 -->
  <LhBackTop :right="24" :bottom="24" />
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- 基本的な使い方 -->
  <LhBackTop :right="24" :bottom="24" />
</template>

visibility-height で表示のしきい値をカスタマイズし、smooth でスムーズスクロールをオフにし、target で指定のスクロールコンテナを監視します。

vue

<script setup lang="ts">
</script>

<template>
  <!-- しきい値のカスタマイズとスムーズスクロールのオフ -->
  <LhBackTop :visibility-height="80" :smooth="false" :right="24" :bottom="90" />
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- しきい値のカスタマイズとスムーズスクロールのオフ -->
  <LhBackTop :visibility-height="80" :smooth="false" :right="24" :bottom="90" />
</template>

スクロール停止（scrollend）

@scrollend はスクロール停止時に現在のスクロール距離を送出します。ネイティブの scrollend イベントを優先します（Chromium 114+ / Safari 18.2+）。古いブラウザでは自動的に scroll + 150ms のデバウンスにフォールバックします。アンカー連動やデータの遅延読み込みによく使用されます。

直近の停止位置：（未スクロール）

vue

<script setup>
import { ref } from 'vue'

const lastStop = ref('（未スクロール）')

function onScrollEnd(scrollTop) {
  lastStop.value = `${scrollTop}px`
}
</script>

<template>
  <LhBackTop :right="24" :bottom="160" @scrollend="onScrollEnd" />
</template>

vue

<script>
export default {
  data() {
    return { lastStop: '（未スクロール）' }
  },
  methods: {
    onScrollEnd(scrollTop) {
      this.lastStop = `${scrollTop}px`
    },
  },
}
</script>

<template>
  <LhBackTop :right="24" :bottom="160" @scrollend="onScrollEnd" />
</template>

API

LhBackTop Props

プロパティ名	説明	型	デフォルト値
target	スクロールコンテナ（セレクターまたは要素、デフォルトはビューポート）	`string \| HTMLElement`	—
visibilityHeight	何ピクセルスクロールしたら表示するか	`number`	`200`
right	右側からのオフセット px	`number`	`40`
bottom	下部からのオフセット px	`number`	`40`
smooth	スムーズスクロールするかどうか	`boolean`	`true`
sx	sx クイックレイアウトプロパティ	`LhSxProps`	—

Events

イベント名	説明	コールバック
click	ボタンをクリックしたときに発火します（その後、先頭に戻るスクロールを実行します）	`(event: MouseEvent)`
scrollend	スクロール停止時に発火します。現在のスクロール距離を伴います	`(scrollTop: number)`

スロット：default（カスタム内容）。

アクセシビリティ

本物の <button> です。アイコンのみの形態では必ず名前を付けます（言語パック backtop.label）
表示／非表示の切り替えでフォーカスツリーの競合を起こしません（非表示時は v-if で取り除きます）

型定義

このコンポーネントが外部にエクスポートする TypeScript の型構造を以下に示します（packages/components/backtop/src/types.ts および @lh-ui/share/core/* のソースから自動抽出。各エントリーをクリックすると完全な定義が表示されます。プロパティの説明は上の Props 表を参照してください）：

LhBackTopProps

export interface LhBackTopProps {
  target?: string | HTMLElement
  visibilityHeight?: number
  right?: number
  bottom?: number
  smooth?: boolean
  sx?: LhSxProps
}

定数

このコンポーネントで使用される公開定数は以下のとおりです（Props 表の「型 / デフォルト値」列から同名のエントリーをクリックするとここへジャンプします）：

LH_BACKTOP_VISIBILITY_HEIGHT_DEFAULT _{（@lh-ui/share/core/backtop より）}

export const LH_BACKTOP_VISIBILITY_HEIGHT_DEFAULT = 200

LH_BACKTOP_SCROLLEND_DELAY _{（@lh-ui/share/core/backtop より）}

export const LH_BACKTOP_SCROLLEND_DELAY = 150

BackTop 上に戻る ​

基本的な使い方 ​

スクロール停止（scrollend） ​

API ​

LhBackTop Props ​

Events ​

アクセシビリティ ​

型定義 ​

定数 ​