05.01.2025

Como Evitar o Scroll da Página ao Clicar em um Link em JS

Resposta Rápida

Existem várias maneiras de evitar o scroll automático da página ao clicar em um link que aciona uma função em JavaScript:

• Você pode usar o atributo href="javascript:void(0);" para desabilitar a ação padrão do link.
• Você também pode aplicar event.preventDefault() no manipulador de eventos de clique:

<a href="#" onclick="pararScroll(event)">Sem Subida</a>

<script>
function pararScroll(event) {
  event.preventDefault();
  // Sua lógica em JavaScript vai aqui
}
</script>

Impedir a ação padrão do link ajuda a evitar alterações indesejadas na posição atual na página.

Usando Href para Controlar o Scroll

Uma alternativa é usar href="!". Isso ajuda a mitigar impactos negativos no SEO enquanto também resolve o problema de scroll:

<a href="!" onclick="pararScroll(event)">Sem Subida</a>

Essa abordagem garante que a URL permaneça legível e evita scroll indesejado, embora não seja muito comum.

jQuery e a Estratégia Return False

Na comunidade jQuery, é comum criar um manipulador que retorna false, bloqueando a ação padrão do elemento e interrompendo a propagação do evento:

$('a').click(function(event) {
  // Seu código JavaScript vai aqui

  return false;  // Sem scroll na página
});

Impacto no SEO e Histórico do Navegador

Ao modificar comportamentos de links, não se esqueça do SEO e seu impacto no histórico do navegador. O uso de window.location.hash ou trabalhar com a History API pode ajudar a organizar o comportamento adequado da página sem prejudicar o SEO.

Visualização

Em vez de exibir conteúdo após clicar em um link, imagine o usuário permanecendo na página atual:

📖 [🔝 Índice]

Muda para:

📖 Página da Receita 1 - Sem Subida! 🎉

Com JavaScript, você pode criar links interativos que não alteram a posição de scroll na página.

Preservando a Funcionalidade e a Legibilidade de Links Externos

É muito importante manter a acessibilidade e a estética de usabilidade para links externos. Separe HTML e JavaScript usando ouvintes de eventos:

document.querySelector('a.semSubida').addEventListener('click', pararScroll);

Essa abordagem melhora a interação com os links e simplifica a legibilidade do código.

Lidando com Quirks de Navegadores Mais Antigos

Considere a compatibilidade com versões mais antigas de navegadores e esteja preparado para usar métodos alternativos para garantir funcionalidade adequada em versões desatualizadas.

Recursos Úteis

1. Método de Evento: preventDefault() - Web API | MDN - Explicação detalhada de como prevenir a ação padrão de eventos.
2. Entendendo a Delegação de Eventos em JavaScript - DigitalOcean - Um artigo que explica tudo sobre a delegação de eventos em JavaScript.
3. Evento de Janela: hashchange - Web API | MDN - Discussão sobre como trabalhar com hashchange como uma alternativa ao scroll.
4. History API - Web API | MDN - Oferece gerenciamento do histórico do navegador.
5. WebAIM: Links e Hipertexto - Texto e Aparência do Link - Ensina como criar links legíveis e utilizáveis.
6. Explicando Debounce e Throttle com Exemplos | CSS-Tricks - Uma introdução às técnicas para gerenciar a intensidade da execução de código.

Video

Navigation