Como adicionar um botão de voltar ao topo no Squarespace

Seus clientes vão agradecer por você adicionar um botão de voltar ao topo no Squarespace. Mas  esse recurso é um pouco mais complicado do que parece. O Squarespace não tem um botão de voltar ao topo nativo. Você precisará contornar isso com um widget sem código, um pouco de código personalizado ou um link âncora.

Vale muito a pena fazer isso. Páginas de destino longas e posts de blog extensos deixam os visitantes perdidos no final de uma rolagem interminável. No celular, onde acontece a maior parte da navegação hoje em dia, rolar a tela com o polegar até o início da página é uma forma rápida de perder a atenção do visitante. 

Um botão de voltar ao topo mantém as pessoas navegando pelo seu site em vez de abandonarem a página. É um pequeno ajuste de navegação que apoia uma estratégia mais ampla de como criar um site que realmente mantenha as pessoas engajadas.

Este guia apresenta primeiro o caminho sem código mais fácil e, depois, aborda duas alternativas para quem quer mais controle sobre o design ou uma opção nativa mais simples.

O método mais fácil: use um widget de voltar ao topo para o Squarespace

A opção mais rápida é usar um widget de voltar ao topo já pronto. Por exemplo, o Widget de Voltar ao Topo da Jotform é uma ferramenta gratuita e sem código que pode colocar esses botões no ar em suas páginas em poucos minutos. Você pode usá-lo para criar um botão flutuante, gerar um código de incorporação e inseri-lo no Squarespace sem tocar em uma única linha de CSS ou JavaScript.

O processo funciona assim:

1. Personalize seu widget. Use o link acima para abrir o criador de widgets da Jotform e começar a ajustar os parâmetros. Você pode alterar os estilos de ícone, definir o tamanho e o raio dos cantos do botão e até escolher cores que combinem com a sua marca. O widget facilita mover o botão pela tela, ajustar o espaçamento nas bordas e ativar ou desativar a visibilidade para usuários de desktop e celular.

2. Obtenha o código de incorporação. Quando o botão estiver do jeito que você quer, a Jotform gera um código de incorporação pronto para usar. Sem instalar plugin, sem etapas de configuração, sem dor de cabeça.

3. Cole o código no Squarespace. É aqui que entra a interface atual do Squarespace. Você tem duas opções principais:

• Em todo o site (recomendado para botões de voltar ao topo): No painel do Squarespace, acesse Páginas no menu à esquerda, role a tela até encontrar a seção Código personalizado e clique em Injeção de código. Cole o código de incorporação no campo Rodapé e clique em Salvar. O botão aparecerá automaticamente em todas as páginas. (Observação: a injeção de código em todo o site está disponível nos planos Business ou superiores.)

• Somente em uma página: Edite a página em que você quer que o botão apareça, clique em + para adicionar um bloco e escolha Código. Cole o código de incorporação ali e salve. O botão aparecerá apenas nessa página, mas você pode repetir o processo em qualquer outra página que precise de um.

Pronto. Atualize seu site e o botão aparecerá, pronto para levar os visitantes de volta ao topo da página. Se você já seguiu as etapas para adicionar um formulário ao Squarespace, o processo de incorporação aqui vai parecer idêntico.

Alguns motivos práticos pelos quais esse método costuma ser o caminho mais simples:

• Ele é atualizado automaticamente. Se você decidir mudar a cor ou a posição no mês que vem, basta editar as configurações do widget na Jotform. O widget publicado reflete a mudança. Sem precisar colar o código de novo.
• Ele funciona em conjunto com outros widgets gratuitos para sites que você possa querer usar, como barras de anúncio, feeds de redes sociais ou botões de contato. Todos usam a mesma abordagem de incorporação.
• Ele combina bem com o restante da configuração do seu Squarespace. Se você também coleta leads por meio de formulários, a integração entre Jotform e Squarespace facilita a adição de novos formulários, pagamentos e captação de leads usando o mesmo padrão de incorporação.

Para a maioria dos usuários do Squarespace, o projeto termina aqui. Mas, se você quer controle total, até o último pixel, continue lendo.

Método alternativo: adicione um botão de voltar ao topo no Squarespace com código personalizado

Se você tem familiaridade com HTML, CSS e um pouco de JavaScript, pode criar um botão flutuante de voltar ao topo totalmente do zero. O Squarespace oferece suporte oficial a código personalizado por meio do painel de Injeção de código, do painel de CSS personalizado e de blocos de código individuais.

Apenas lembre-se do tempo que isso exige. Você terá mais flexibilidade sobre o botão em si, mas também precisará testar e resolver mais problemas. Por isso, essa opção geralmente só é indicada para desenvolvedores que precisam de um visual muito específico. Você também pode usá-la se quiser ter controle detalhado sobre animação, limites de rolagem ou comportamento em diferentes breakpoints.

Veja como fazer.

1. Escolha onde o código ficará. Para um botão que deve aparecer em todo o site, use Website → Pages → Code Injection → Footer. O código adicionado aqui é inserido logo antes da tag de fechamento </body> em todas as páginas. Para um botão pontual em uma página específica, passe o mouse sobre a página no painel Pages, clique no ícone de engrenagem, escolha Advanced e use Page Header Code Injection.
2. Adicione o HTML. Insira um elemento de botão com um ID para poder selecioná-lo depois. Geralmente, ele se parece com isto: <button id=”backToTop” aria-label=”Back to top”>↑ Top</button>. Mantenha o aria-label para ajudar na acessibilidade com leitores de tela.
3. Estilize com CSS. Agora você edita a aparência e o desempenho do botão com CSS. Comece abrindo o painel Custom CSS (em Website → Website Tools → Custom CSS). Posicione o botão como fixo no canto inferior direito. Em seguida, oculte-o por padrão definindo opacity: 0 e pointer-events: none. Você também vai querer uma transição que faça o botão aparecer suavemente quando uma classe como .visible for adicionada. Por fim, defina um valor de z-index alto o suficiente para que o botão fique acima do seu conteúdo, mas abaixo de qualquer modal.
4. Adicione a lógica em JavaScript. Você também precisa de um pequeno script que monitore a posição da rolagem. Assim, o botão aparece apenas quando é relevante para o usuário. Por exemplo, quando o visitante rola além de um limite escolhido (por exemplo, 300 pixels), o script adiciona automaticamente a classe .visible e o botão aparece. Se o usuário clicar no botão, ele chama window.scrollTo({ top: 0, behavior: ‘smooth’ }), que leva a página de volta ao topo com uma animação suave.

A maior vantagem dessa abordagem é a liberdade de design, mas isso não é algo de que a maioria das empresas precisa. Widgets e ferramentas como o Jotform Apps, para criar aplicativos sem código, oferecem flexibilidade suficiente para deixar o botão com a sua cara e podem economizar muito tempo de programação. Além disso, você não precisará atualizar seu código toda vez que o Squarespace lançar uma mudança estrutural em seus templates.

Solução alternativa simples: use um link âncora como atalho de voltar ao topo

Se você não precisa de um botão flutuante, apenas de um link clicável de voltar ao topo no final de seções longas, o recurso de link âncora nativo do Squarespace resolve sem nenhum código. O Squarespace adicionou esse recurso em 2025, como parte do Squarespace 7.1. Veja como funciona:

1. Defina a âncora na seção superior. Clique em Editar na página em que você quer o atalho de voltar ao topo. Passe o mouse sobre a primeira seção e clique em Editar seção. Em seguida, role até o campo Link âncora, que fica na parte inferior do painel de configurações da seção. Digite um slug como “top” e clique no ícone de copiar para obter a sua URL.

2. Adicione um link de voltar ao topo onde quiser. Adicione um bloco de botão ou um bloco de texto mais abaixo na página. Selecione o texto ou o botão, clique no ícone de link e cole a URL da âncora. Quando um visitante clicar nele, a página voltará para essa seção superior.

3. Opcional: suavize a rolagem. Os links âncora levam o usuário ao topo da página instantaneamente, o que pode ser brusco e quebrar a imersão no seu site. Corrija isso adicionando uma animação de rolagem suave. Acesse Website → Pages → Custom CSS e adicione:

html {

  scroll-behavior: smooth;

}

Essa única linha aplica rolagem suave a todos os links âncora do seu site.

Esse método tem alguns limites evidentes. Ele não é flutuante, então os visitantes veem o link apenas em determinados pontos da página (geralmente no final de seções longas ou perto do rodapé). Ele também não aparece automaticamente em todas as páginas, como acontece com um widget ou um botão criado com código personalizado em todo o site. Para posts longos de blog, páginas de vendas ou sites de uma página só que precisam apenas de uma rolagem rápida para cima, no entanto, um link âncora costuma ser suficiente.

Observação: os links âncora não têm suporte direto nas seções de blog, eventos, portfólio ou loja. Para usá-los nessas páginas, você precisa adicionar uma seção em branco acima da seção sem suporte e ancorar nela. Para que o resultado fique adequado, desative a opção Preencher tela nas configurações da seção em branco. Caso contrário, você terá um espaço vazio estranho no topo da página.

Adicione um botão de voltar ao topo sem complicar o Squarespace

Se você procura a maneira mais fácil de adicionar esses botões sem complicar o seu Squarespace, um widget sem código é a opção mais rápida e flexível. Por exemplo, com o widget Voltar ao topo da Jotform, você pode criar, incorporar e atualizar o botão sem escrever uma linha de código.

O código personalizado oferece controle total sobre o design, o que é útil se você tem objetivos visuais muito específicos. O recurso nativo de link âncora é uma boa solução alternativa, mas não oferece tanto controle. Seja qual for a sua escolha, adapte o método às necessidades do seu site e não exagere na construção.

Experimente hoje mesmo o widget Voltar ao topo para adicionar ao seu site Squarespace um botão de rolagem até o topo com acabamento profissional em poucos minutos. E, se você já usa a Jotform para formulários do Squarespace, o processo de incorporação vai parecer familiar desde o primeiro clique.