Retour en haut

Apparaît lorsque le défilement dépasse un seuil ; un clic ramène en haut. Le défilement fluide s'appuie sur l'API native scrollTo({ behavior: 'smooth' }), avec une dégradation automatique sous prefers-reduced-motion.

Utilisation de base

Utilisation de base (défilez vers le bas)

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

<template>
  <!-- Utilisation de base -->
  <LhBackTop :right="24" :bottom="24" />
</template>

<script>
export default {}
</script>

<template>
  <!-- Utilisation de base -->
  <LhBackTop :right="24" :bottom="24" />
</template>

visibility-height personnalise le seuil d'apparition, smooth désactive le défilement fluide et target observe un conteneur de défilement précis.

Seuil personnalisé et défilement fluide désactivé

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

<template>
  <!-- Seuil personnalisé et défilement fluide désactivé -->
  <LhBackTop :visibility-height="80" :smooth="false" :right="24" :bottom="90" />
</template>

<script>
export default {}
</script>

<template>
  <!-- Seuil personnalisé et défilement fluide désactivé -->
  <LhBackTop :visibility-height="80" :smooth="false" :right="24" :bottom="90" />
</template>

Fin de défilement (scrollend)

@scrollend émet la distance de défilement courante lorsque le défilement s'arrête : l'événement natif scrollend est utilisé en priorité (Chromium 114+ / Safari 18.2+) ; les navigateurs plus anciens replient automatiquement sur scroll + un anti-rebond de 150 ms. Fréquemment utilisé pour la synchronisation des ancres et le chargement différé des données.

Événement scrollend

Dernière position d'arrêt : (aucun défilement)

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

const lastStop = ref('(aucun défilement)')

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

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

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

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

API

LhBackTop Props

Propriété	Description	Type	Valeur par défaut
target	Conteneur de défilement (sélecteur ou élément ; la fenêtre par défaut)	string | HTMLElement	—
visibilityHeight	Apparition après cette distance de défilement en px	number	200
right	Décalage par rapport au bord droit, en px	number	40
bottom	Décalage par rapport au bord inférieur, en px	number	40
smooth	Défilement fluide	boolean	true
sx	Propriétés de mise en page rapide sx	LhSxProps	—

Events

Événement	Description	Paramètre de rappel
click	Émis lors du clic sur le bouton (le défilement vers le haut suit)	(event: MouseEvent)
scrollend	Émis lorsque le défilement s'arrête, avec la distance de défilement courante	(scrollTop: number)

Slots : default (contenu personnalisé).

Accessibilité

• Bouton <button> réel ; en mode icône seule, il doit être nommé (pack de langue backtop.label)
• L'apparition / disparition n'entre pas en conflit avec l'arbre des focus (masqué via v-if, donc retiré du DOM)

Définitions de types

Les structures de types TypeScript exportées par ce composant sont présentées ci-dessous (extraction automatique à partir des sources packages/components/backtop/src/types.ts et @lh-ui/share/core/* ; cliquez sur chaque entrée pour afficher la définition complète ; la description des propriétés se trouve dans le tableau Props ci-dessus) :

LhBackTopProps

export interface LhBackTopProps {
  /** Conteneur de défilement (sélecteur ou élément ; la fenêtre par défaut) */
  target?: string | HTMLElement
  /** Apparition après cette distance de défilement en px */
  visibilityHeight?: number
  /** Décalage par rapport au bord droit, en px */
  right?: number
  /** Décalage par rapport au bord inférieur, en px */
  bottom?: number
  /** Défilement fluide */
  smooth?: boolean
  /** Propriétés de mise en page rapide sx */
  sx?: LhSxProps
}

Constantes

Les constantes publiques utilisées par ce composant sont les suivantes (cliquez sur l'entrée correspondante dans la colonne « Type / Valeur par défaut » du tableau Props pour y accéder) :

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

/** Seuil de défilement par défaut, en px */
export const LH_BACKTOP_VISIBILITY_HEIGHT_DEFAULT = 200

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

/** Seuil d'immobilité, en ms, pour l'anti-rebond de scrollend (utilisé uniquement dans les navigateurs sans scrollend natif) */
export const LH_BACKTOP_SCROLLEND_DELAY = 150