Como rolar páginas suavemente em JavaScript

A rolagem suave de páginas melhora bastante a experiência do usuário em sites, proporcionando uma navegação mais fluida e agradável. Com JavaScript, é fácil implementar essa funcionalidade para que a transição entre seções de uma página seja mais suave e controlada. Vamos explorar como rolar páginas suavemente em JavaScript de várias maneiras.

1. Usando a API scrollIntoView

A API nativa scrollIntoView() é uma das formas mais simples de implementar a rolagem suave com JavaScript. Ela permite rolar um elemento específico até a área visível da janela.

Exemplo:

document.querySelector('#seção-alvo').scrollIntoView({
  behavior: 'smooth'
});

• #seção-alvo: Seleciona o elemento HTML que será rolado até a área visível.
  
  
• behavior: 'smooth': Define a rolagem como suave.

Você pode acionar essa função em um evento de clique, como ao clicar em um link de navegação que rola até uma seção da página.

Exemplo completo com evento de clique:

<a href="#" id="scroll-link">Ir para seção</a>
<section id="seção-alvo">Seção de destino</section>

<script>
document.getElementById('scroll-link').addEventListener('click', function(e) {
    e.preventDefault();
    document.querySelector('#seção-alvo').scrollIntoView({
        behavior: 'smooth'
    });
});
</script>

Nesse exemplo, ao clicar no link, a página rola suavemente até a seção alvo.

2. Usando window.scrollTo()

Outra forma de controlar a rolagem suave é usando o método window.scrollTo(). Esse método oferece maior controle sobre a rolagem, permitindo especificar coordenadas exatas de destino.

Exemplo básico:

window.scrollTo({
  top: 500,
  behavior: 'smooth'
});

• top: 500: A página será rolada verticalmente até 500px a partir do topo.
  
  
• behavior: 'smooth': Novamente, define a rolagem como suave.

3. Rolar até o topo da página

Se você quiser implementar um botão para rolar suavemente de volta ao topo da página, você pode usar o mesmo método scrollTo:

<button id="scrollTopBtn">Voltar ao topo</button>

<script>
document.getElementById('scrollTopBtn').addEventListener('click', function() {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
});
</script>

Quando o botão é clicado, a página rola suavemente para o topo.

4. Implementando rolar suavemente em âncoras

Normalmente, links de âncoras (<a href="#id">) rolariam a página instantaneamente. Podemos usar JavaScript para fazer com que esses links rolem suavemente para a seção de destino.

Veja como você pode fazer isso:

<a href="#seção-alvo" class="smooth-scroll">Ir para seção</a>
<section id="seção-alvo">Seção de destino</section>

<script>
document.querySelectorAll('.smooth-scroll').forEach(link => {
    link.addEventListener('click', function(e) {
        e.preventDefault();
        const targetId = this.getAttribute('href');
        document.querySelector(targetId).scrollIntoView({
            behavior: 'smooth'
        });
    });
});
</script>

• querySelectorAll('.smooth-scroll'): Seleciona todos os links com a classe smooth-scroll.
  
  
• scrollIntoView(): Rola suavemente até o elemento de destino, neste caso a âncora.

5. Suporte e fallback

Nem todos os navegadores mais antigos suportam a opção smooth diretamente. Para esses casos, podemos usar bibliotecas como smooth-scroll ou escrever um fallback manual usando um intervalo de tempo para simular uma rolagem suave.

Por exemplo, a biblioteca smooth-scroll pode ser uma solução simples e compatível com vários navegadores:

<script src="https://cdn.jsdelivr.net/npm/smooth-scroll@16.1.3/dist/smooth-scroll.polyfills.min.js"></script>

<script>
var scroll = new SmoothScroll('a[href*="#"]', {
    speed: 800,
    speedAsDuration: true
});
</script>

Esse código implementa rolagem suave para qualquer link de âncora em navegadores compatíveis e com fallback para os mais antigos.

Outro exemplo prático

Os códigos abaixo cria esse efeito, mas de uma forma mais sofisticada: rola suavemente pra cima.

Script que cria o efeito de suavização da rolagem:

 <script type="text/javascript">

    $(document).ready(function() {
       $('#subir').click(function(){ 
          $('html, body').animate({scrollTop:0}, 'slow');
      return false;
         });
     });

 </script>

Link:

<a href="minha_pagina.html" id="subir">Topo</a>

A rolagem suave melhora a experiência do usuário ao navegar por uma página, tornando as transições mais naturais e menos abruptas.

Com JavaScript, podemos facilmente implementar essa funcionalidade usando a API nativa scrollIntoView(), window.scrollTo(), ou até mesmo com bibliotecas como smooth-scroll para compatibilidade extra.

Dúvidas ou sugestões sobre como rolar páginas suavemente em JavaScript? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Tags: rolar página javascript