Volver arriba

Botón de volver arriba que aparece cuando el desplazamiento supera un umbral.

Volver arriba

<template>
  <div class="demo-col" style="max-width: 640px">
    <p class="demo-note">Desplázate hacia abajo dentro del contenedor más allá de visibilityHeight (200 px): aparecerá el botón de volver arriba en la esquina inferior derecha</p>
    <div ref="scroller" class="anchor-scroller">
      <div v-for="i in 20" :key="i" class="anchor-sec">
        <h3>Sección {{ i }}</h3>
        <p>Desplázate hacia abajo y haz clic en el botón de la esquina inferior derecha.</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	Descripción	Tipo	Predeterminado
target	Contenedor de desplazamiento (selector o elemento; el viewport por defecto)	string \| HTMLElement	—
visibilityHeight	Cuántos píxeles de desplazamiento hacen que aparezca el botón	number	—
right	Desplazamiento respecto al borde derecho, en px	number	—
bottom	Desplazamiento respecto al borde inferior, en px	number	—
smooth	Si el desplazamiento es suave	boolean	false
sx	Propiedades de layout abreviadas	—	—

Slots

Slot	Descripción
default	Contenido del botón (si no se pasa, se renderiza el icono de flecha predeterminado)