13.01.2025

Como Mover um Link Âncora Mais Alto em uma Página Sem JavaScript

Resposta Rápida

Você pode ajustar a posição dos links âncora usando pseudo-elementos CSS. Defina um elemento invisível antes do elemento de destino com uma margem superior negativa e defina um preenchimento positivo.

.ancora::before {
  content: '';
  display: block;
  margin-top: -50px; /* Quantidade de deslocamento */
  padding-top: 50px;
  visibility: hidden;
}

Atribua a classe .ancora aqueles elementos aos quais você deseja ancorar. Ajuste o valor da margin-top de acordo com o deslocamento necessário.

Controle Detalhado com CSS

Usando scroll-margin

scroll-margin-top fornece um mecanismo alternativo para deslocar o elemento de destino:

.destino {
  scroll-margin-top: 100px; /* Altura do cabeçalho padrão ou deslocamento desejado */
}

Usando Pseudo-elementos

Se você precisar dar suporte a navegadores mais antigos, é preferível usar a abordagem com pseudo-elementos.

Visualização

Imagine que seu navio (⚓) precisa atracar em um farol (🗼) a uma certa distância:

Com um âncora regular: [🗼]

Queremos posicionar o navio um pouco mais alto:

Âncora ajustada: [⚓]

Colocamos um marcador invisível (⭕) na distância necessária acima do farol:

Posição desejada: [⭕] [🗼]

Agora a âncora está onde deve estar, garantindo clareza na visualização e evitando uma proximidade excessiva à borda da tela (💻).

Gerenciamento de Controle através do JavaScript

Controlando a Posição de Rolagem

Se o CSS não for suficiente, o método window.scrollTo no JavaScript permite um controle preciso da posição de rolagem.

// Monitorando cliques em links âncora
document.querySelectorAll('a[href^="#"]').forEach(ancora => {
  ancora.addEventListener('click', function (e) {
    e.preventDefault(); // Impede o comportamento padrão do link âncora

    const idDestino = this.getAttribute('href');
    const elementoDestino = document.querySelector(idDestino);

    // Calcula a posição e aplica o deslocamento
    const posicaoDeslocada = elementoDestino.getBoundingClientRect().top + window.pageYOffset - 50;

    // Rolagem suave para a posição ajustada
    window.scrollTo({
      top: posicaoDeslocada,
      behavior: "smooth"
    });
  });
});

Lidar com Cliques Repetidos e Mudanças de URL

Para responder efetivamente a cliques consecutivos e mudanças no hash da URL, use manipuladores de eventos:

window.addEventListener('hashchange', function() {
  // Lógica para corrigir a posição após a alteração do hash
});

Introduzindo Atraso com setTimeout

Às vezes, um breve atraso pode ser necessário:

setTimeout(() => window.scrollTo(...), 1); // Atraso microscópico antes de executar o scrollTo

Kit de Ferramentas JavaScript

Posicionamento Absoluto para Controle Preciso

Como alternativa ao método de padding/margin no CSS, você pode usar a seguinte abordagem:

• Envolva os elementos âncora de destino em um contêiner com position: relative.
• Defina os elementos âncora como position: absolute, ajustando ainda mais sua posição através da propriedade top.

jQuery para Desenvolvedores Modernos

Se você preferir usar jQuery:

$('a[href^="#"]').on('click', function(event) {
  // Lógica semelhante ao scrollTo, mas implementada com jQuery
});

Materiais Úteis

1. Rolagem Suave | CSS-Tricks — Um guia detalhado sobre rolagem suave com exemplos de jQuery.
2. Método Element: scrollIntoView() - Web APIs | MDN — Descrição detalhada do método scrollIntoView() para rolar um elemento para a visualização.
3. Selector :target do CSS — Exemplo de uso da pseudo-classe :target do W3Schools.
4. animate() | Documentação da API jQuery — Para aqueles que preferem animações dinâmicas, a função .animate() no jQuery.
5. Cabeçalhos Fixos e Links de Salto? A Solução é scroll-margin-top | CSS-Tricks — Um guia sobre uso de âncoras com cabeçalhos fixos.

Video

Navigation