Um efeito nativo no plugin do Elementor do WordPress é ao adicionar um link âncora, ele faz um efeito de scroll suave até o ponto que você define com ID.
Mas agora que pode acontecer, se estiver usando o Elementor PRO, é definir o topo como fixo, e com isso a ancoragem dos links que ficam no menu não se posicionam corretamente.
Algo que pode ser feito, é definir um padding-top na mesma altura do Elementor que esta o menu, fazendo a compensação.
Outra opção é adicionar, através do filtro um valor que compense a altura da seção ou container.
add_action( 'wp_footer', function() {
if ( ! defined( 'ELEMENTOR_VERSION' ) ) {
return;
}
?>
<script>
jQuery( function( $ ) {
if ( window.elementorFrontend ) {
elementorFrontend.hooks.addFilter( 'frontend/handlers/menu_anchor/scroll_top_distance', function( scrollTop ) {
const difference = 100;
return scrollTop - difference;
});
}
});
</script>
<?php
}, 100 );
?>Esse arquivo você iria adicionar no functions.php do seu tema (espero que esteja utilizando tema filho), e o valor você irá modificar, seria o da variável difference, será de acordo. Você pode fazer variação, caso queira ter valores diferentes para mobile e desktop:
add_action( 'wp_footer', function() {
if ( ! defined( 'ELEMENTOR_VERSION' ) ) {
return;
}
?>
<script>
jQuery( function( $ ) {
if ( window.elementorFrontend ) {
elementorFrontend.hooks.addFilter( 'frontend/handlers/menu_anchor/scroll_top_distance', function( scrollTop ) {
const difference = $(window).width() <= 640 ? 150 : 100;
return scrollTop - difference;
});
}
});
</script>
<?php
}, 100 );
?>Vemos largura da janela, se ela for menor ou igual 640 ele terá o valor 150, senão será o valor 100.
Dessa forma você consegue personalizar o valor do scroll top utilizado pelo plugin do Elementor
