Smart Scroll Buttons - Volver arriba y Desplazarse abajo con vista previa en vivo

Las páginas largas necesitan una salida

Una categoría con sesenta productos, una columna de filtros, una página CMS interminable, un listado del back office — el visitante se desplaza, encuentra lo que buscaba y después tiene que volver a subirlo todo a mano. Es una fricción pequeña, repetida en cada página larga, y basta un botón para eliminarla. Este módulo le da dos.

Dos botones, cada uno con su propia configuración

• Volver arriba (Back to Top) aparece en cuanto el visitante se ha desplazado hacia abajo. Al hacer clic, la página sube suavemente hasta el principio.
• Desplazarse abajo (Scroll to Bottom) se muestra mientras queda más página por debajo. Al hacer clic, salta directamente al final — práctico en listados largos y en páginas donde lo importante, un formulario o un bloque de contacto, está justo abajo.

No se trata de un mismo ajuste aplicado dos veces. Cada botón tiene su propia forma, ancho, alto, color de fondo, color del icono, márgenes, z-index y velocidad de desplazamiento, así que puede hacer una pareja a juego o dos botones deliberadamente distintos. Tenga en cuenta que la animación de aparición es un ajuste del botón Volver arriba.

Una vista previa en vivo en lugar de suposiciones

La página de configuración muestra los botones mientras usted los configura. Cambie la forma, mueva el selector de color, ajuste el tamaño y la vista previa se actualiza al instante — se acabó eso de guardar, ir a la tienda, recargar y volver. Esa es la diferencia entre dar con el aspecto adecuado a la primera y darlo al quinto intento.

Forma, color y posición

Elija Círculo (circle) o Cuadrado redondeado (rounded square). Defina el ancho y el alto, los colores de fondo y del icono, y la distancia a los bordes de la pantalla — margen derecho y margen inferior para Volver arriba, margen derecho y margen superior para Desplazarse abajo. Un ajuste de z-index decide por encima de qué elementos se sitúa el botón, algo que importa cuando el tema tiene una cabecera fija, un aviso de cookies o una ventana de chat disputándose la misma esquina.

El movimiento, a su gusto

El botón Volver arriba tiene una animación de aparición que decide cómo entra mientras el visitante se desplaza — Fundido (fade), Girar (spin), Giro inverso (spin-inverse), Zoom (zoom) o Ninguna (none) si prefiere que aparezca sin más. La velocidad de desplazamiento, que se ajusta por separado en cada botón, es un número en milisegundos — cuanto más alto, más lento y más suave — de modo que la vuelta arriba puede ser un salto rápido o un deslizamiento pausado.

Tienda, back office o ambos

Dos interruptores independientes. Muestre los botones a sus clientes en la tienda, a su equipo dentro del panel de administración, o en los dos sitios. Los listados de productos y las largas páginas de ajustes del back office agradecen un botón Volver arriba tanto como una página de categoría.

Todo se valida

Los colores tienen que ser colores reales, los campos numéricos números enteros de cero o más, y las listas de opciones solo aceptan los valores previstos. Cualquier dato no válido se rechaza al guardar, con un mensaje que indica el campo y el valor — "#GGG" is not a valid color en lugar de un fallo silencioso o un botón roto.

Compatibilidad

PrestaShop 1.7, 8 y 9, en ocho idiomas — alemán, español, francés, inglés, italiano, neerlandés, polaco y turco. Los botones se generan desde la plantilla y la hoja de estilos del propio módulo, con la fuente de iconos incluida en lugar de cargarse desde un CDN externo, así que no se solicita ningún recurso ajeno y los botones siguen apareciendo aunque un CDN no esté disponible.

Preguntas frecuentes

¿Puedo usar solo el botón Volver arriba?

Sí. Los dos botones se configuran de forma independiente, así que puede activar uno, el otro o los dos a la vez.

¿Entrará en conflicto con mi cabecera fija o mi ventana de chat?

Para eso está el ajuste de z-index — súbalo para colocar el botón por delante del elemento que compite, o bájelo para dejarlo detrás. Los márgenes, además, le permiten apartar el botón por completo.

¿Tengo que guardar para ver cómo queda?

No. La página de configuración muestra ambos botones en vivo mientras cambia la forma, el tamaño y los colores.

¿Puedo mostrarlo también en el back office?

Sí, es un interruptor aparte. Los listados largos de la administración lo agradecen tanto como la tienda.

¿Cómo hago que el desplazamiento sea más lento y suave?

Suba el valor de la velocidad de desplazamiento — está en milisegundos, así que un número más alto significa un recorrido más largo y pausado.

¿Qué formas hay disponibles?

Círculo y cuadrado redondeado, cada una con su propio ancho y alto.

¿Carga algo desde un servidor externo?

No. La fuente de iconos se incluye con el módulo, así que no se descarga nada de un CDN y los botones se muestran incluso si está bloqueado.