0Pricing
CSS Academy · Aula

scroll-behavior: smooth

Ative a rolagem suave para links de âncora e rolagens programáticas com scroll-behavior.

scroll-behavior: smooth é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.

O que é scroll-behavior?

scroll-behavior controla se a rolagem acionada pela navegação (links de âncora, JavaScript scrollTo()) deve ser animada suavemente ou saltar instantaneamente.

scroll-behavior: smooth

Definir scroll-behavior: smooth no elemento html ou body faz com que toda a navegação por links de âncora da página seja animada suavemente:

  <p>Scrolling on this page is smooth thanks to <code>html { scroll-behavior: smooth; }</code>.</p>

Instantânea ou suave

Valores:

  • auto (padrão): salto instantâneo
  • smooth: rolagem animada até o destino

Navegação por links de âncora

Com a rolagem suave ativada, clicar em um link como <a href="#contact"> rola suavemente até o elemento com id="contact", em vez de saltar instantaneamente.

  <nav>
    <a href="#about">About</a>
    <a href="#work">Work</a>
    <a href="#contact">Contact</a>
  </nav>
  <section id="about"><h3>About</h3></section>
  <section id="work"><h3>Work</h3></section>
  <section id="contact"><h3>Contact</h3></section>

JavaScript scrollTo() com rolagem suave

Passe behavior: "smooth" aos métodos de rolagem do JavaScript para obter uma rolagem animada:

  <pre class="snippet">window.scrollTo({ top: 0, behavior: 'smooth' });

document.querySelector('#section').scrollIntoView({
  behavior: 'smooth',
  block: 'start'
});</pre>

Interação com prefers-reduced-motion

A rolagem suave pode causar enjoo. Sempre a desative para usuários que preferem menos movimento:

  <p>Respects <code>prefers-reduced-motion</code>.</p>

scroll-behavior em contêineres

Aplique a qualquer contêiner rolável, não apenas à página:

  <div class="tabs-panel">
    <div class="tab">Tab 1</div><div class="tab">Tab 2</div><div class="tab">Tab 3</div>
  </div>

Limitações

CSS scroll-behavior não permite controlar a duração nem a aceleração da rolagem. Para obter controle preciso da animação, use a API Web Animations do JavaScript ou bibliotecas como GSAP com seus plugins de rolagem.

scroll-padding-top para cabeçalhos fixos

Quando um cabeçalho fixo se sobrepõe aos destinos das âncoras, scroll-padding-top adiciona um deslocamento para que o destino não fique oculto atrás do cabeçalho:

  <p>Anchor targets offset by fixed header height.</p>

scroll-margin versus scroll-padding

scroll-margin adiciona o deslocamento diretamente ao elemento de destino; scroll-padding adiciona o deslocamento ao contêiner de rolagem. Ambos resolvem o problema do cabeçalho fixo:

  <div class="section">Section content</div>

Observação sobre acessibilidade

A rolagem suave é um aprimoramento da experiência do usuário. Garanta sempre que a navegação por âncoras funcione mesmo sem ela — não dependa do comportamento de rolagem suave para obter funcionalidade, use-o apenas para aprimorar o aspecto visual.

Verificação rápida

Como garantir que a animação de rolagem suave seja desativada para usuários com sensibilidade vestibular ao movimento?

Recapitulação

scroll-behavior: smooth em html ativa a rolagem suave e animada para links de âncora e métodos de rolagem do JavaScript. Use scroll-padding-top para afastar os destinos de rolagem de cabeçalhos fixos. Sempre desative a rolagem suave dentro de uma consulta de mídia prefers-reduced-motion: reduce para garantir a acessibilidade.

Perguntas Frequentes

A aula “scroll-behavior: smooth” é grátis?

Sim — o texto completo de “scroll-behavior: smooth” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.

O que vou aprender em “scroll-behavior: smooth”?

Ative a rolagem suave para links de âncora e rolagens programáticas com scroll-behavior. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar CSS Academy?

Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “scroll-behavior: smooth”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de CSS Academy?

Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. overflow: hidden scroll auto clip
  2. scroll-behavior: smooth
  3. scroll-snap-type e scroll-snap-align
  4. Estilização da Barra de Rolagem com ::-webkit-scrollbar
← Voltar para CSS Academy