Scroll to Top Astra: corrigir botão que não funciona

Tipo Page Builders

Nome do erro Scroll to Top do Astra não funciona EN: Astra Scroll to Top button not working

Severidade Informativo

Descrição O Scroll to Top Astra Pro não funciona quando o botão está desativado para o dispositivo atual no Customizer, quando o JavaScript do tema é bloqueado por um plugin de cache, ou quando outro plugin de voltar ao topo entra em conflito com o do Astra.

O que é Scroll to Top Astra Pro que não funciona?

O Scroll to Top do Astra é o botão flutuante de voltar ao topo que o tema exibe no canto inferior da página e que, ao ser clicado, rola a tela suavemente até o início do conteúdo. Ele é controlado pelo Personalizador (Customizer) do WordPress, com opções de visibilidade por dispositivo (desktop, tablet e mobile), estilo do ícone e cor. O recurso depende de um pequeno arquivo JavaScript que o Astra carrega no rodapé da página para detectar a rolagem e animar o retorno ao topo.

Quando esse botão deixa de funcionar, em geral não há mensagem de erro visível: o botão simplesmente não aparece, aparece mas não rola a página, ou some apenas em um dispositivo. A causa raiz costuma estar em três frentes: a opção desativada para o dispositivo em uso, o JavaScript do tema removido ou adiado por um plugin de cache ou de performance, ou o conflito com um segundo botão de voltar ao topo vindo de outro plugin. Por ser um recurso de usabilidade e não de funcionamento crítico do site, a severidade é baixa, mas a correção melhora a experiência em páginas longas.

Como identificar

O botão de voltar ao topo simplesmente não aparece no canto inferior da página, mesmo após rolar bastante o conteúdo.
O botão aparece no desktop mas some no celular (ou o contrário), indicando opção de visibilidade desligada para aquele dispositivo.
Ao clicar no botão, a página não rola suavemente até o topo ou recarrega para o topo da URL com âncora, sinal de JavaScript ausente.
No console do navegador surge um erro de JavaScript ligado ao arquivo do tema, como “Uncaught ReferenceError” envolvendo o script do Astra.
Dois botões de voltar ao topo aparecem sobrepostos na mesma página, indicando que outro plugin também injeta o seu próprio botão.

Antes de começar: Antes de mexer no CSS Adicional, em configurações de cache ou no functions.php em produção, faça um backup completo do site (arquivos e banco de dados) ou aplique primeiro em um ambiente de staging, para reverter caso o layout ou o cache quebre.

Como prevenir

Após cada atualização do Astra ou importação de Starter Template, confira no Customizer se o Scroll To Top continua ativo nos dispositivos desejados, pois a importação pode sobrescrever a opção.
Evite usar dois botões de voltar ao topo ao mesmo tempo: escolha o do Astra ou o de um plugin dedicado, nunca os dois, para não gerar conflito de clique.
Ao configurar o cache, exclua o JavaScript do tema das otimizações de adiar e combinar, validando o botão em aba anônima após cada mudança.
Documente regras de CSS Adicional que alterem posição ou z-index de elementos flutuantes, para não esconder o botão sem querer em ajustes futuros.

Causa

A opção Scroll To Top está com a visibilidade desligada para o dispositivo em uso: no Customizer do Astra, os interruptores de Desktop, Tablet e Mobile são independentes, e desmarcar o do dispositivo testado faz o botão sumir só nele.
Um plugin de cache ou de performance (WP Rocket, Autoptimize, Perfmatters) adiou, combinou ou removeu o JavaScript do tema, deixando o script de scroll-to-top do Astra sem carregar e o botão sem ação ao clique.
A opção Scroll To Top está totalmente desativada no Personalizador após uma atualização do tema ou importação de um Starter Template, que sobrescreveu a configuração anterior do botão.
Outro plugin (um plugin de back-to-top dedicado ou um construtor de página) injeta o seu próprio botão de voltar ao topo, gerando dois botões sobrepostos ou um conflito de evento de clique com o do Astra.
Um seletor de CSS customizado ou um plugin define z-index baixo, display none ou posição fora da viewport para o elemento do botão, escondendo o Scroll To Top que o Astra renderiza no rodapé.

Como resolver

Reative o Scroll To Top no Customizer por dispositivo: Abra o Personalizador do Astra e confirme que a opção Scroll To Top está ativa e visível para os dispositivos desejados. Os interruptores de Desktop, Tablet e Mobile são independentes, então marque o do dispositivo em que o botão sumiu.
```
Painel WP -> Aparência -> Personalizar
Acesse Scroll To Top (em versões antigas: Layout -> Scroll To Top)
Ative a opção e marque os dispositivos Desktop, Tablet e Mobile -> Publicar
```
Libere o JavaScript do tema no plugin de cache: Se o botão aparece mas não rola ao clicar, o script do Astra provavelmente foi adiado ou combinado pelo cache. Limpe o cache e exclua o JavaScript do tema das otimizações de adiar e combinar para o script voltar a executar.
```
Painel WP -> WP Rocket (ou Perfmatters/Autoptimize) -> Limpar cache
Em Otimização de Arquivos, exclua os arquivos JS do Astra de 'Adiar (defer)' e 'Combinar'
Recarregue a página em aba anônima para validar
```
Identifique conflito com outro botão de voltar ao topo: Se aparecem dois botões ou o clique falha, desative temporariamente plugins de back-to-top ou recursos equivalentes do construtor de página e recarregue a página a cada teste, até isolar o que disputa com o Astra.
```
Painel WP -> Plugins -> desative plugins de 'back to top' ou 'scroll to top' dedicados
Desative no construtor (Elementor/Spectra) qualquer recurso próprio de voltar ao topo
Recarregue a página após cada desativação para confirmar
```
Verifique CSS que esconde o botão: Use o inspetor do navegador para localizar o elemento do botão do Astra e confira se algum CSS aplica display none, z-index baixo ou posição fora da tela. Ajuste ou remova a regra que o oculta.
```
Abra a página -> botão direito sobre a área do botão -> Inspecionar
Procure o elemento '#ast-scroll-top' e veja as regras aplicadas
No CSS Adicional do Customizer, corrija display/z-index/posição se necessário
```
Force a reexibição do botão via código se persistir: Em casos em que o script do tema é removido por minificação agressiva, garanta a presença do ícone com um snippet de fallback que reexibe e reativa a rolagem suave, sem depender do JS combinado do tema.
```
Adicione o snippet abaixo via plugin de Code Snippets ou no functions.php do tema filho
Salve e limpe o cache do site e do navegador
Teste o clique em desktop e mobile
```

PHP

<?php
add_action( 'wp_footer', 'full_astra_scroll_top_fallback', 99 );
function full_astra_scroll_top_fallback() {
    if ( ! function_exists( 'astra_get_option' ) ) {
        return; // Astra inativo: nao injeta nada.
    }
    ?>
    <a href="#" id="full-scroll-top" aria-label="Voltar ao topo"
       style="position:fixed;right:20px;bottom:20px;z-index:9999;display:none;">&#8679;</a>
    <script>
    (function(){
        var b = document.getElementById('full-scroll-top');
        if (!b) { return; }
        window.addEventListener('scroll', function(){
            b.style.display = (window.pageYOffset > 300) ? 'block' : 'none';
        });
        b.addEventListener('click', function(e){
            e.preventDefault();
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });
    })();
    </script>
    <?php
}

Perguntas frequentes

Por que o botão Scroll to Top do Astra não aparece

Na maioria dos casos a opção Scroll To Top está desativada no Customizer ou desligada para o dispositivo em uso. Em Aparência, Personalizar, Scroll To Top, ative o recurso e marque os interruptores de Desktop, Tablet e Mobile conforme onde você quer exibir o botão.

O botão aparece mas não rola a página ao clicar, o que fazer

Isso indica que o JavaScript do tema não está executando, geralmente porque um plugin de cache adiou ou combinou o script. Limpe o cache e exclua os arquivos JS do Astra das otimizações de adiar e combinar para o clique voltar a funcionar.

Por que o Scroll to Top some só no celular no Astra

Os interruptores de visibilidade por dispositivo são independentes no Astra. Se o botão some apenas no mobile, abra o Customizer em Scroll To Top e marque o interruptor de Mobile, que provavelmente está desligado para aquele dispositivo.

Apareceram dois botões de voltar ao topo na página, como resolver

Há um segundo botão vindo de outro plugin ou do construtor de página, em conflito com o do Astra. Desative o recurso de back-to-top do outro plugin ou do construtor e mantenha apenas o botão nativo do Astra para evitar a sobreposição.

O WP Rocket pode quebrar o Scroll to Top do Astra

Sim. Quando o WP Rocket adia ou combina o JavaScript do tema, o script de scroll-to-top do Astra pode deixar de carregar. Exclua os arquivos JS do Astra das opções de adiar e combinar do WP Rocket e limpe o cache para restaurar o botão.

O Scroll to Top é um recurso do Astra Pro ou do tema gratuito

O botão de voltar ao topo é configurado no Personalizador do Astra, e o Astra Pro amplia as opções de personalização do tema. Se o controle não aparecer no Customizer, confirme que o tema e, quando aplicável, o módulo do Astra Pro estão ativos e atualizados.

Como saber se o problema é do Astra ou de outro plugin

Desative os demais plugins um a um e recarregue a página a cada teste. Se o botão voltar a funcionar, reative os plugins até identificar o que remove o JavaScript do tema ou injeta um segundo botão de voltar ao topo.

Atenção

Como corrigir o preset que não aplica estilos no Happy Addons

O Happy Addons preset não funciona quando a licença Pro está inativa, o widget escolhido não tem suporte a preset, estilos manuais sobrepõem o preset ou o CSS do Elementor está em cache, fazendo o Design dropdown não aplicar a aparência ao widget.

Atenção

Como corrigir o conflito de Meta Boxes entre ACF PRO e JetEngine no WordPress

O conflito de meta boxes entre ACF PRO e JetEngine acontece quando os dois plugins registram grupos de campos para o mesmo tipo de post e gravam na mesma meta key, gerando caixas duplicadas no editor, valores sobrescritos e campos que parecem não salvar.

Atenção

Como corrigir o conflito de widgets entre Ultimate Addons e Crocoblock no WordPress

O conflito de widgets entre Ultimate Addons e Crocoblock acontece quando os dois plugins registram widgets no mesmo Elementor e disputam scripts, cache ou nomes de widget, fazendo os widgets sumirem do painel, duplicarem ou quebrarem a previa no editor.

Grave

Como corrigir a incompatibilidade entre Astra Pro e Elementor Pro

O conflito entre Astra Pro e Elementor Pro acontece quando os dois constroem a mesma área da página ao mesmo tempo: o título aparece duplicado, o header e o rodape do Theme Builder se somam aos do Astra, ou a largura total não se aplica. A causa quase sempre e o Astra renderizar elementos que o Elementor Pro já monta.

Atenção

Como corrigir o Transparent Header que não funciona no mobile no Astra Pro

O Astra Transparent Header não funciona no mobile quando a opção Ativar Em está limitada ao desktop, quando uma configuração por página desativa o recurso, ou quando o ponto de quebra do menu foi aumentado e o cabeçalho perde a cor entre 768px e esse valor. A correção é alinhar a opção de dispositivo e o ponto de quebra.

Atenção

Como corrigir o erro de CSS no Customizer do Astra Pro

O Astra Customizer CSS não aplica quando o código de Personalizar -> CSS Adicional não surte efeito no site, porque o cache serve o head antigo, a regra perde para a especificidade do CSS dinamico do Astra Pro, ou o CSS ficou preso a outro tema. A correção limpa o cache, sobe a especificidade do seletor e confirma o tema ativo.

Setores

Extensões

Integrações

Como corrigir o Scroll to Top que não funciona no Astra Pro

O que é Scroll to Top Astra Pro que não funciona?

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir o preset que não aplica estilos no Happy Addons

Como corrigir o conflito de Meta Boxes entre ACF PRO e JetEngine no WordPress

Como corrigir o conflito de widgets entre Ultimate Addons e Crocoblock no WordPress

Como corrigir a incompatibilidade entre Astra Pro e Elementor Pro

Como corrigir o Transparent Header que não funciona no mobile no Astra Pro

Como corrigir o erro de CSS no Customizer do Astra Pro

Setores

Extensões

Integrações

Extensões

Hero Sections

Seções de CTA

Login

Blog

Cabeçalhos

Seções de FAQ

Cadastro

Blog individual

Rodapés

Seções de contato

Seções de preços

Faixas

Portfólio

Seções de equipe

Números

Logotipos