17.04.2025

Rolagem para um Elemento Div Usando JavaScript

Resposta Rápida

Para pular instantaneamente para um elemento específico:

document.querySelector('#target').scrollIntoView();

Para uma rolagem suave até o elemento:

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

Substitua '#target' pelo seletor CSS do elemento desejado. O método querySelector é utilizado para seleção flexível de elementos.

Visão Detalhada dos Métodos de Rolagem

Rolagem Instantânea Sem Animação

Se você precisar de uma transição instantânea sem animações:

location.href = '#target';

Certifique-se de que o elemento selecionado tenha o id de "target".

Controlando a Posição da Rolagem

Para controlar manualmente a posição da rolagem:

const pontoDeInteresse = document.getElementById('target');
const destino = pontoDeInteresse.getBoundingClientRect().top + window.scrollY;
window.scroll({ top: destino, behavior: 'smooth' });

Aqui, a posição atual na área visível é considerada.

Levando em Conta Elementos Fixos

Se sua página tiver elementos com posição fixa:

const alturaCabeçalhoFixo = -60;
const elemento = document.getElementById('target');
const posicaoY = elemento.getBoundingClientRect().top + window.scrollY + alturaCabeçalhoFixo;

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

Aspectos Especiais da Rolagem em Navegadores Baseados em WebKit

Em navegadores baseados em WebKit, a rolagem funciona de maneira diferente:

if (document.body.scrollTop || document.documentElement.scrollTop) {
    location.href = "#";
    setTimeout(() => {
        elemento.scrollIntoView();
    }, 0);
}

A página primeiro rola para a posição inicial e, em seguida, para o elemento especificado.

jQuery

Se você estiver trabalhando com jQuery:

$('#target').animate({
    scrollTop: $('#target').offset().top
}, 1000);

Haverá uma rolagem animada até o elemento ao longo de um segundo.

Visualização

Vamos ver uma ilustração relativamente simples:

📍 = Sua Localização Atual  
🎯 = Ponto de Interesse (Elemento Alvo)

Aqui está como o JavaScript nos ajuda a alcançar nosso objetivo:

map.askJS('🎯');

Imagine o movimento ilustrado da seguinte forma:

Início: 📍 ------------------ 🚶‍♂️ ---------- 🎯  
Depois:   🚶‍♂️ -------------------------------- 🎯  

Parabéns! Você se moveu com sucesso para o elemento desejado com mínimo esforço!

Métodos Adicionais

Rolagem Considerando a Posição Absoluta de um Elemento

Para rolar considerando a posição absoluta de um elemento:

const posicaoY = document.getElementById("myDiv").offsetTop;
window.scrollTo({ top: posicaoY, behavior: 'smooth' });

Função de Rolagem Reutilizável

Criar uma função que pode ser reutilizada várias vezes pode ser muito útil:

function rolarParaElemento(selector, deslocamento = 0) {
    const elemento = document.querySelector(selector);
    const y = elemento.getBoundingClientRect().top + window.scrollY + deslocamento;

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

rolarParaElemento('#target', -60);

Esse método é conveniente para trabalhar com páginas que têm elementos fixos.

Recursos Úteis

1. Elemento: método scrollIntoView() - Web APIs | MDN — Documentação sobre o método scrollIntoView().
2. Rolagem Suave | CSS-Tricks — Um guia para implementar rolagem suave.
3. Como Criar um Botão Voltar ao Topo — Como criar um botão "Voltar ao Topo".
4. javascript - ScrollIntoView() causando o movimento de toda a página - Stack Overflow — Soluções para problemas com scrollIntoView().
5. Método Window scrollTo() — Documentação para o método scrollTo().
6. GitHub - cferdinandi/smooth-scroll: Um script leve para animar a rolagem para links de âncora. — Um script leve para rolagem animada.
7. Como Implementar Rolagem Suave em JavaScript Puro — SitePoint — Um guia para criar rolagem suave sem bibliotecas externas.

Video

Navigation