17.04.2025

Rolando para um Elemento sem jQuery: Função JS e Evento Onclick

Resposta Rápida

Para navegação em uma página da web, use o método scrollIntoView() em JavaScript, chamando-o para o elemento desejado com um id específico:

document.querySelector('#seuElementId').scrollIntoView({ behavior: 'smooth' });

O método querySelector busca o elemento, enquanto scrollIntoView() realiza uma transição suave até ele, graças à opção behavior: 'smooth'.

Revisando: O Equívoco sobre scrollTop e jQuery

Não é necessário sobrecarregar a página com bibliotecas como jQuery para implementar um simples efeito de rolagem. Utilizar scrollIntoView() melhora a performance do seu JavaScript e proporciona uma operação mais suave, especialmente em dispositivos móveis.

Rolagem em Eventos e Mudanças de URL

Você pode vincular scrollIntoView() com o evento onclick, permitindo que os usuários naveguem no site sem alterar a URL ou recarregar a página, garantindo uma experiência interativa para o usuário.

Personalização com scrollIntoView

Usando o objeto de opções em scrollIntoView(), defina os parâmetros block e inline para controlar a posição da rolagem:

element.scrollIntoView({
  behavior: 'smooth',
  block: 'nearest',
  inline: 'start'
});

Isso permite regular a direção do movimento da barra de rolagem de uma maneira "suave".

Selecionando Elementos como um Artista: Indo Além do getElementById

querySelector oferece uma seleção flexível de elementos usando qualquer seletor CSS em vez do limitado getElementById:

document.querySelector('.suaClasseDeElemento').scrollIntoView({ behavior: 'smooth' });

Compatibilidade: Rolagem entre Navegadores

Antes de adicionar a rolagem interativa, verifique a compatibilidade do scrollIntoView() com vários navegadores e prepare soluções alternativas para aqueles que não suportam este método.

Visualização

Imagine a seguinte imagem:

 O caminho para cada **ID** é uma 🚩 no pico de uma montanha:

Antes: 🏔............🚩#topo........🚩#seção1........🚩#rodapé........🏔

Um clique:

🧗🏽‍♂️ E você já está em 🚩#seção1:

<a href="#seção1">Ir para Seção 1</a>

Melhorando a Acessibilidade: Atenção aos Detalhes na Rolagem

A rolagem deve ser acessível a todos os usuários, incluindo aqueles que utilizam tecnologias assistivas. Os controles devem ser facilmente acessíveis, por exemplo, através da navegação por teclado.

Performance: A Velocidade Importa

Para otimizar a performance, especialmente em dispositivos móveis, use transições CSS para aliviar o processamento de animações de rolagem no processador gráfico (GPU).

Sem link href? Sem Problemas!

Em casos onde o uso de href não é possível, utilize o recurso de rolagem mantendo o 'ID' em atributos de dados:

<button data-scrollto="seção1">Ir para Seção 1</button>

document.querySelectorAll('[data-scrollto]').forEach(button => {
  button.addEventListener('click', function() {
    const targetId = this.getAttribute('data-scrollto');
    const targetElement = document.querySelector('#' + targetId);
    targetElement.scrollIntoView({ behavior: 'smooth' });
  });
});

Dessa forma, você mantém uma estrutura HTML semanticamente correta e melhora a experiência do usuário no site.

Recursos Úteis

1. Window: método scrollTo() - Web APIs | MDN – uma descrição detalhada do método scrollTo.
2. Método scrollIntoView() do Elemento DOM HTML – informações detalhadas sobre o método scrollIntoView().
3. Propriedade scroll-behavior do CSS – descrição da propriedade scroll-behavior para rolagem suave.
4. Como Implementar Rolagem Suave em JavaScript Puro – um guia para implementar rolagem suave com JavaScript puro.
5. javascript - Rolagem suave de links âncora SEM jQuery - Stack Overflow – discussão sobre rolagem suave sem jQuery na comunidade Stack Overflow.
6. Posso usar... Tabelas de suporte para HTML5, CSS3, etc – informações sobre o suporte da scroll-behavior entre diferentes navegadores.
7. Como criar animações CSS de alto desempenho | Artigos | web.dev – criando animações CSS de alto desempenho.

Video

Navigation