30.04.2025

Implementando Rolagem Suave em JavaScript sem jQuery

Resposta Rápida

Pronto para mergulhar na rolagem suave? Vamos usar o método embutido scrollIntoView:

// Hora da festa! 🥳
document.getElementById('target').scrollIntoView({ behavior: 'smooth' });

Legal, né? Agora, vamos aplicar a rolagem suave a todos os links âncoras de uma maneira simples:

// Todos os links internos agora rolam suavemente, como deslizando no gelo!
document.querySelectorAll('a[href^="#"]').forEach(âncora => {
  âncora.addEventListener('click', e => {
    e.preventDefault();
    // Aqui vem o deslizar suave! 🛷
    document.querySelector(âncora.getAttribute('href')).scrollIntoView({ behavior: 'smooth' });
  });
});

Dessa forma, transformamos o pulo abrupto entre âncoras em suaves transições.

Análise: Em Celebração à Rolagem Suave

Detalhes sobre scrollIntoView

O método scrollIntoView permite que você ajuste os parâmetros do objeto:

element.scrollIntoView({
  behavior: 'smooth', // Quem gosta de um passeio irregular? Eu não!
  block: 'start',     // O melhor lugar é no topo
  inline: 'nearest'   // Elegante e sofisticado
});

As Maravilhas da Rolagem com window.scrollTo

Quer controle total? Seu aliado confiável é window.scrollTo. Sinta a mágica:

const scrollToTop = () => {
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    // Sem ziguezagues aqui! ✈️
    window.scrollTo(0, c - c / 8);
  }
};

scrollToTop();

Com essa função maravilhosa, você pode rolar suavemente a página até o topo, melhorando a navegação.

Lidando com o Inesperado (Casos Excepcionais)

Embora o recurso scroll-behavior: smooth seja suportado pela maioria dos navegadores, é sábio estar preparado para cenários inesperados:

1. Caprichos da Rolagem: Usuários podem começar a interferir rolando ou fazendo gestos enquanto a rolagem suave está em andamento. Tome medidas para controlar esses momentos monitorando eventos wheel e touchmove.
2. Manifestações de Conteúdo Dinâmico: O DOM pode mudar, deslocando a posição do elemento alvo, por exemplo, quando imagens carregam ou estilos mudam. Fique atento a tais complexidades e não perca a vigilância!

Melhorando a Rolagem com CSS

Método CSS para Rolagem Suave

Quem diria que HTML e CSS poderiam resolver tudo? Apresento a você scroll-behavior — um truque inteligente que funciona como uma propriedade CSS:

html {
  scroll-behavior: smooth;
}

Esse truque simples faz com que todos os links âncoras e a rolagem programática funcionem suavemente.

Aperfeiçoando a Rolagem com CSS

scroll-behavior é uma ótima maneira de melhorar gradualmente. Mesmo que seu navegador não suporte scroll-behavior, a rolagem ainda funcionará, apenas sem a suavidade adicional.

Visualização

Imagine a rolagem como uma jornada suave por paisagens sinuosas:

Início: 🚩 (O ápice da sua jornada)
Jornada: 🚂💨 (O trem suavemente se movendo pela página)
Destino Final: 🏁 (O elemento alvo)

Note a diferença:

Antes das mudanças: 🚂🔼 (Saltos abruptos e súbitos)
Depois das mudanças: 🚂⛷️ (Deslizamentos suaves e elegantes)

Por que buscar energia (⛽) no jQuery quando você pode abraçar a elegância do HTML e CSS?

Dicas Profissionais para Rolagem Suave

Otimização de Desempenho

Para garantir que sua animação não se torne uma experiência de "quadro a quadro", use window.requestAnimationFrame para uma utilização de recursos mais produtiva e eficiente.

Suporte em Todos os Navegadores

Ficar por dentro das novidades é empolgante, mas às vezes vale a pena considerar um polyfill para navegadores mais antigos e confiáveis. O polyfill para rolagem suave linkado abaixo será útil.

Prioridade em Acessibilidade

Todos nós nos esforçamos para criar uma experiência do usuário impressionante, mas não devemos esquecer da acessibilidade. Assegure que sua rolagem suave seja percebida corretamente por usuários de teclado e aqueles que dependem de tecnologias assistivas.

Recursos Úteis

1. scroll-behavior - CSS: Folhas de Estilo em Cascata | MDN - Aprenda como habilitar a rolagem suave em seu navegador.
2. Rolagem Suave | CSS-Tricks - Uma coleção abrangente de várias maneiras de implementar a rolagem suave sem jQuery.
3. Can I use... Tabelas de suporte para HTML5, CSS3, etc - Verifique se seu navegador confiável está pronto para suportar scroll-behavior CSS.
4. Tutorial sobre Rolagem Suave com JavaScript Puro - YouTube - Aprenda a implementar rolagem suave com JavaScript puro enquanto desfruta de uma xícara de café ou um lanche de pipoca.
5. Um Guia Completo sobre Links e Botões | CSS-Tricks - Um guia prático que explora a questão antiga: você deve usar links ou botões?
6. API de História - Web API | MDN - Uma visão geral das capacidades da API de História, particularmente útil ao empregar rolagem suave com atualizações de URL.
7. GitHub - iamdustan/smoothscroll: Polyfill para Rolagem Suave - Um excelente polyfill disponível que apresenta navegadores mais antigos à possibilidade de usar scroll-behavior.

Video

Navigation