post
Ajustando Automaticamente Offset Scroll (Distância da Rolagem) do Header no Elementor
Publicado em: 05/03/2024 / Atualizado em: 27/05/2024
Se você quer implementar em sua página um scroll suave para uma seção especifica com WordPress e Elementor, é possivel fazer isso nativamente, usando um botão com o atributo href
configurado com o ID de mesmo nome da seção, exemplo:
<a href="#contato">Entre em contato</a>
<div id="#contato">
Esta é uma seção de contato
</div>
Porem, quando o Elementor rola a página (scroll page), e você tem um cabeçalho fixo, o cabeçalho acaba “comendo” uma parte da sua seção, que acaba prejudicando a visualização e experiência do usuário.
Para resolver isso, segue abaixo um código Javascript, para adicionar em seu site Elementor, que possibilita, calcular automaticamente o container do cabeçalho, e evita que o scroll da página acabe em cima da seção:
window.addEventListener('elementor/frontend/init', function() { elementorFrontend.hooks.addFilter('frontend/handlers/menu_anchor/scroll_top_distance', function(scrollTop) { var header = jQuery('header'); if (header.length) { return scrollTop - header.outerHeight(); } else { return scrollTop; } }); });
OBS: Para o código funcionar perfeitamente, você precisa deixar seu container principal configurado com a tag <head>
, para isso, faça o seguinte:

Selecionando o container, clicando em “Layout > Opções adicionais”, você pode trocar a “Tag HTML” para header.
Publicações recomendadas:
Inscreva-se em Nossa News:
Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.

Link Curto para Compartilhamento
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.
bruno.art.br/pb/4617
ID de Referência: 4617
Sugira uma publicação
Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.