Smart Scroll Buttons - Voltar ao topo e Descer até ao fim com pré-visualização em tempo real

As páginas longas precisam de uma saída

Uma categoria com sessenta produtos, uma coluna de filtros, uma página CMS interminável, uma listagem do back office — o visitante desce, encontra o que procurava e depois tem de voltar a subir tudo à mão. É um atrito pequeno, repetido em cada página longa, e basta um botão para o eliminar. Este módulo dá-lhe dois.

Dois botões, configurados em separado

• Voltar ao topo (Back to Top) surge assim que o visitante desce na página. Um clique faz subir suavemente até ao início.
• Descer até ao fim (Scroll to Bottom) mostra-se enquanto ainda houver página por baixo. Um clique salta diretamente para o final — prático em listagens longas e em páginas onde o que interessa, um formulário ou um bloco de contacto, fica lá em baixo.

Não se trata da mesma definição aplicada duas vezes. Cada botão tem a sua própria forma, largura, altura, cor de fundo, cor do ícone, margens, z-index e velocidade de deslocamento, pelo que pode fazer deles um par a condizer ou dois botões propositadamente diferentes. Note que a animação de entrada é uma definição do botão Voltar ao topo.

Uma pré-visualização em tempo real em vez de suposições

A página de definições mostra os botões enquanto os configura. Mude a forma, arraste o seletor de cor, ajuste o tamanho e a pré-visualização acompanha — deixa de ter de guardar, ir à loja, recarregar e voltar atrás. É esta a diferença entre acertar no aspeto à primeira e só lá chegar à quinta tentativa.

Forma, cor e posição

Escolha círculo (circle) ou quadrado arredondado (rounded square). Defina a largura e a altura, as cores de fundo e do ícone e a distância aos limites do ecrã — margem direita e margem inferior para o Voltar ao topo, margem direita e margem superior para o Descer até ao fim. Uma definição de z-index decide por cima de que outros elementos o botão fica, algo que conta quando o tema tem um cabeçalho fixo, um aviso de cookies ou uma janela de chat a disputar o mesmo canto.

O movimento à sua escolha

O botão Voltar ao topo tem uma animação de entrada que define como surge à medida que o visitante percorre a página — Desvanecer (fade), Rodar (spin), Rotação inversa (spin-inverse), Ampliar (zoom) ou Nenhuma (none), se preferir que apareça sem mais. A velocidade de deslocamento, definida em separado em cada botão, é um número em milissegundos — quanto mais alto, mais lento e mais suave — de modo que o regresso ao topo pode ser um salto rápido ou um deslizar tranquilo.

Loja, back office ou ambos

Dois interruptores independentes. Mostre os botões aos clientes na loja, à sua equipa dentro do painel de administração, ou nos dois lados. As listagens de produtos e as longas páginas de definições do back office agradecem um botão Voltar ao topo tanto como uma página de categoria.

Tudo é validado

As cores têm de ser cores a sério, os campos numéricos têm de ser números inteiros de zero ou mais e as listas de opções só aceitam os valores previstos. Qualquer valor inválido é recusado ao guardar, com uma mensagem que indica o campo e o valor em causa — "#GGG" is not a valid color em vez de uma falha silenciosa ou de um botão avariado.

Compatibilidade

PrestaShop 1.7, 8 e 9, em oito idiomas — alemão, espanhol, francês, inglês, italiano, neerlandês, polaco e turco. Os botões são gerados a partir do modelo e da folha de estilos do próprio módulo, com o tipo de letra dos ícones incluído em vez de carregado a partir de um CDN externo, pelo que não é pedido nenhum recurso de fora e os botões continuam a aparecer mesmo que um CDN esteja inacessível.

Perguntas frequentes

Posso usar apenas o botão Voltar ao topo?

Sim. Os dois botões configuram-se de forma independente, por isso pode ativar um, o outro ou os dois em conjunto.

Vai entrar em conflito com o meu cabeçalho fixo ou com a janela de chat?

É precisamente para isso que serve a definição de z-index — suba-a para o botão ficar à frente do elemento concorrente, ou baixe-a para o deixar atrás. As margens permitem-lhe ainda afastar o botão por completo.

Tenho de guardar para ver como fica?

Não. A página de definições pré-visualiza os dois botões em tempo real enquanto muda a forma, o tamanho e as cores.

Também o posso mostrar no back office?

Sim, é um interruptor à parte. As listagens longas da administração beneficiam dele tanto como a loja.

Como torno o deslocamento mais lento e mais suave?

Aumente o valor da velocidade de deslocamento — está em milissegundos, por isso um número mais alto significa um percurso mais longo e mais calmo.

Que formas estão disponíveis?

Círculo e quadrado arredondado, cada uma com a sua largura e altura.

Carrega alguma coisa a partir de um servidor externo?

Não. O tipo de letra dos ícones vem com o módulo, por isso nada é obtido de um CDN e os botões aparecem mesmo que este esteja bloqueado.