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

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.

Erros relacionados

- [Como corrigir o erro do Mobile Menu no Astra Pro](https://full.services/wp-fixer/corrigir-mobile-menu-astra-pro/)
- [Como corrigir o Customizer que não salva alterações no Astra Pro](https://full.services/wp-fixer/corrigir-customizer-nao-salva-astra-pro/)
- [Como corrigir o erro de cores no Global Color Palette do Astra Pro](https://full.services/wp-fixer/corrigir-global-color-palette-astra-pro/)

## 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

1. 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
```

2. 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
```

3. 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
```

4. 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
```

5. 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
```


## Código

```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.

**Fonte:** [Astra Theme — Documentação oficial (Scroll To Top)](https://wpastra.com/docs/)