Retour en haut

Bouton de retour en haut apparaissant lorsque le défilement dépasse un seuil.

Retour en haut

<template>
  <div class="demo-col" style="max-width: 640px">
    <p class="demo-note">En descendant dans le conteneur au-delà de visibilityHeight (200 px), le bouton de retour en haut apparaît en bas à droite</p>
    <div ref="scroller" class="anchor-scroller">
      <div v-for="i in 20" :key="i" class="anchor-sec">
        <h3>Section {{ i }}</h3>
        <p>Défilez vers le bas, puis cliquez sur le bouton en bas à droite.</p>
      </div>
    </div>
    <LhBackTop :target="scrollerEl" :visibility-height="200" :right="24" :bottom="24" smooth />
  </div>
</template>

<script>
export default {
  data: () => ({
    scrollerEl: undefined,
  }),
}
</script>

Props

Prop	Description	Type	Valeur par défaut
target	Conteneur de défilement (sélecteur ou élément, viewport par défaut)	string \| HTMLElement	—
visibilityHeight	Nombre de pixels de défilement avant apparition	number	—
right	Décalage depuis la droite en px	number	—
bottom	Décalage depuis le bas en px	number	—
smooth	Défilement fluide ou non	boolean	false
sx	Raccourci de mise en page sx	—	—

Slots

Slot	Description
default	Contenu du bouton (rendu par défaut en icône flèche en l'absence de valeur)