Código JavaScript Scroll Suave no Mobile para o Widget Tabs do Elementor - Bruno Devx - BR Criativus

post #6223

Código JavaScript Scroll Suave no Mobile para o Widget Tabs do Elementor

Publicado em: 09/05/2025 / Atualizado em: 09/05/2025

Categorias: BlogElementorElementorJavaScript (JS)JSWordpress

Com esse código JS você adiciona um scroll suave ao clicar nas tabs do Elementor e também adiciona um alinhamento de scroll automático assim que o usuário clica no botão da tab ele é automaticamente movido para cima ou para baixo para que a visualização do usuário se ajuste com a tela.

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const tabButtons = document.querySelectorAll('.e-n-tab-title');
    const headerOffset = 90;

    tabButtons.forEach(button => {
      button.addEventListener('click', function () {
        if (window.innerWidth <= 768) {
          setTimeout(() => {
            const rect = button.getBoundingClientRect();
            const absoluteTop = rect.top + window.pageYOffset;
            const scrollTo = absoluteTop - headerOffset;

            window.scrollTo({
              top: scrollTo,
              behavior: 'smooth'
            });
          }, 200); 
        }
      });
    });
  });
</script>

Publicações recomendadas:


Link Direto

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.

bruno.art.br/?p=6223

ID de Referência: 6223

Sugira uma publicação

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato