BackTop

Appears after scrolling past a threshold and scrolls back to the top on click, using the native scrollTo({ behavior: 'smooth' }) (degrades automatically under prefers-reduced-motion).

Basic usage

Basic (scroll down)

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

<template>
  <!-- Basic -->
  <LhBackTop :right="24" :bottom="24" />
</template>

<script>
export default {}
</script>

<template>
  <!-- Basic -->
  <LhBackTop :right="24" :bottom="24" />
</template>

visibility-height customizes the threshold, smooth disables smooth scrolling, and target observes a specific scroll container.

Custom threshold, no smooth

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

<template>
  <!-- Custom threshold, no smooth -->
  <LhBackTop :visibility-height="80" :smooth="false" :right="24" :bottom="90" />
</template>

<script>
export default {}
</script>

<template>
  <!-- Custom threshold, no smooth -->
  <LhBackTop :visibility-height="80" :smooth="false" :right="24" :bottom="90" />
</template>

Scroll end

@scrollend fires with the current scroll offset when scrolling stops: the native scrollend event is preferred (Chromium 114+ / Safari 18.2+); older browsers fall back to scroll + a 150ms debounce. Useful for anchor syncing and data lazy-loading.

scrollend event

Last stop: (not scrolled)

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

const lastStop = ref('(not scrolled)')

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

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

<script>
export default {
  data() {
    return { lastStop: '(not scrolled)' }
  },
  methods: {
    onScrollEnd(scrollTop) {
      this.lastStop = `${scrollTop}px`
    },
  },
}
</script>

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

API

LhBackTop Props

Attribute	Description	Type	Default
target	Scroll container (selector or element)	string | HTMLElement	—
visibilityHeight	Visibility threshold in px	number	200
right	Right offset px	number	40
bottom	Bottom offset px	number	40
smooth	Smooth scrolling	boolean	true
sx	Quick layout props	LhSxProps	—

LhBackTop Events

Event	Description	Callback
click	Back-to-top button clicked; scrolling back starts after the event	(e: MouseEvent) => void
scrollend	Scrolling on the target stops; carries the current scroll offset (native scrollend when supported, scroll + debounce otherwise)	(scrollTop: number) => void

Accessibility

• A real <button> named via the backtop.label locale key
• Hidden state is removed from the tree (v-if)

Type Definitions

The TypeScript type structures exported by this component (auto-extracted from packages/components/backtop/src/types.ts and @lh-ui/share/core/* sources; click each entry to expand; see the Props table above for attribute descriptions):

LhBackTopProps

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

Constants

Public constants used by this component (linked from the Type / Default columns in the Props table above):

LH_BACKTOP_VISIBILITY_HEIGHT_DEFAULT _{(from @lh-ui/share/core/backtop)}

export const LH_BACKTOP_VISIBILITY_HEIGHT_DEFAULT = 200

LH_BACKTOP_SCROLLEND_DELAY _{(from @lh-ui/share/core/backtop)}

export const LH_BACKTOP_SCROLLEND_DELAY = 150