Volver arriba

Aparece al superar un umbral de desplazamiento y vuelve a la parte superior al hacer clic. El desplazamiento suave usa el scrollTo({ behavior: 'smooth' }) nativo y se degrada automáticamente con prefers-reduced-motion.

Uso básico

Uso básico (desplázate hacia abajo para verlo)

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

<template>
  <!-- Uso básico -->
  <LhBackTop :right="24" :bottom="24" />
</template>

<script>
export default {}
</script>

<template>
  <!-- Uso básico -->
  <LhBackTop :right="24" :bottom="24" />
</template>

visibility-height personaliza el umbral de aparición, smooth desactiva el desplazamiento suave y target escucha un contenedor de desplazamiento concreto.

Umbral personalizado y sin desplazamiento suave

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

<template>
  <!-- Umbral personalizado y sin desplazamiento suave -->
  <LhBackTop :visibility-height="80" :smooth="false" :right="24" :bottom="90" />
</template>

<script>
export default {}
</script>

<template>
  <!-- Umbral personalizado y sin desplazamiento suave -->
  <LhBackTop :visibility-height="80" :smooth="false" :right="24" :bottom="90" />
</template>

Fin del desplazamiento (scrollend)

@scrollend emite la distancia de desplazamiento actual cuando el desplazamiento se detiene: tiene prioridad el evento nativo scrollend (Chromium 114+ / Safari 18.2+); los navegadores antiguos retroceden automáticamente a scroll con un antirrebote de 150 ms. Suele usarse para la sincronización de anclas y la carga diferida de datos.

Evento scrollend

Última posición de parada: (sin desplazar)

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

const lastStop = ref('(sin desplazar)')

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

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

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

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

API

LhBackTop Props

Prop	Descripción	Tipo	Predeterminado
target	Contenedor de desplazamiento (selector o elemento; por defecto, el viewport)	string | HTMLElement	—
visibilityHeight	Píxeles de desplazamiento a partir de los cuales aparece	number	200
right	Desplazamiento desde la derecha en px	number	40
bottom	Desplazamiento desde abajo en px	number	40
smooth	Si el desplazamiento es suave	boolean	true
sx	Props de disposición rápida	LhSxProps	—

Events

Evento	Descripción	Parámetros de la retrollamada
click	Se dispara al hacer clic en el botón (a continuación se ejecuta el desplazamiento a la parte superior)	(event: MouseEvent)
scrollend	Se dispara cuando el desplazamiento se detiene, con la distancia de desplazamiento actual	(scrollTop: number)

Slots: default (contenido personalizado).

Accesibilidad

• Es un <button> real; en su forma de solo icono debe tener nombre (paquete de idioma backtop.label)
• La aparición/desaparición no entra en conflicto con el árbol de foco (al ocultarse se elimina del DOM con v-if)

Definiciones de tipos

Las estructuras de tipos TypeScript exportadas por este componente (extraídas automáticamente de packages/components/backtop/src/types.ts y de las fuentes @lh-ui/share/core/*; abre cada entrada para ver la definición completa; la descripción de los atributos está en la tabla de Props de arriba):

LhBackTopProps

export interface LhBackTopProps {
  /** Contenedor de desplazamiento (selector o elemento; por defecto, el viewport) */
  target?: string | HTMLElement
  /** Píxeles de desplazamiento a partir de los cuales aparece */
  visibilityHeight?: number
  /** Desplazamiento desde la derecha en px */
  right?: number
  /** Desplazamiento desde abajo en px */
  bottom?: number
  /** Si el desplazamiento es suave */
  smooth?: boolean
  /** Props de disposición rápida */
  sx?: LhSxProps
}

Constantes

Las constantes públicas que utiliza este componente (puedes hacer clic en la entrada del mismo nombre en la columna «Tipo / Predeterminado» de la tabla de Props para saltar aquí):

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

/** Umbral de desplazamiento predeterminado en px */
export const LH_BACKTOP_VISIBILITY_HEIGHT_DEFAULT = 200

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

/** Umbral de inactividad en ms para el antirrebote de scrollend (solo en navegadores sin scrollend nativo) */
export const LH_BACKTOP_SCROLLEND_DELAY = 150