Skip to main content
Componente renderless que expõe uma função scroll via slot com escopo. Permite rolar suavemente até um elemento pelo ID, com margem de offset e controle de visibilidade baseado na posição de scroll.

​
Uso

Botão “Voltar ao topo”: 
<SmoothScroll element-id="topo" :display-at="300">
  <template v-slot="{ scroll }">
    <button @click="scroll">Voltar ao topo</button>
  </template>
</SmoothScroll>
Âncora para seção com offset: 
<SmoothScroll element-id="avaliacoes" :margin="80">
  <template v-slot="{ scroll }">
    <a @click.prevent="scroll">Ver avaliações</a>
  </template>
</SmoothScroll>

​
Propriedades

PropriedadeTipoObrigatóriaValor padrãoDescrição
elementIdString❌nullID do elemento HTML de destino para a rolagem.
marginNumber❌0Offset em pixels subtraído da posição final (útil para headers fixos).
displayAtNumber❌0Posição de scroll em pixels a partir da qual o componente se torna visível. 0 para sempre visível.

​
Slots

SlotEscopoDescrição
default{ scroll }Função que executa a rolagem suave ao ser chamada.