# DataFirefly Volver arriba — Documentación

> El módulo DataFirefly Volver arriba añade un botón flotante que devuelve a tus visitantes a la parte superior de la página con un solo clic. Esta guía cubre la instalación…

- Página: <https://www.datafirefly.com/es/documentation/dfbacktotop/>
- Idioma: es
- Actualizado el: 2026-06-27
- Otros idiomas: [fr](https://www.datafirefly.com/documentation/dfbacktotop/index.md), [en](https://www.datafirefly.com/en/documentation/dfbacktotop/index.md), [de](https://www.datafirefly.com/de/documentation/dfbacktotop/index.md), [it](https://www.datafirefly.com/it/documentation/dfbacktotop/index.md), [pl](https://www.datafirefly.com/pl/documentation/dfbacktotop/index.md), [nl](https://www.datafirefly.com/nl/documentation/dfbacktotop/index.md), [pt](https://www.datafirefly.com/pt/documentation/dfbacktotop/index.md)
- Índice: <https://www.datafirefly.com/es/documentation/llms.txt>

El módulo **DataFirefly Volver arriba** añade un botón flotante que devuelve a tus visitantes a la parte superior de la página con un solo clic. Esta guía cubre la instalación y todos los ajustes disponibles.

## Instalación

1. En tu back office, ve a **Módulos > Gestor de módulos**.
2. Haz clic en **Subir un módulo** (arriba a la derecha) y envía el archivo `dfbacktotop.zip`.
3. Cuando termine la instalación, haz clic en **Configurar**.

El módulo se registra automáticamente en los hooks `actionFrontControllerSetMedia` y `displayFooter`. No se requiere ninguna configuración manual de hooks.

## Configuración

La página de configuración tiene dos pestañas: **Comportamiento** y **Apariencia**.

### Pestaña Comportamiento

- **Umbral de activación (px)** — número de píxeles de desplazamiento a partir del cual aparece el botón. Valor por defecto: `300`.
- **Desplazamiento suave** — activa el regreso animado y progresivo. Desactivado, el regreso arriba es instantáneo.
- **Mostrar en móvil** — muestra u oculta el botón en pantallas de menos de 768 px de ancho.

### Pestaña Apariencia

- **Posición** — abajo a la derecha o abajo a la izquierda.
- **Icono** — chevron, flecha o triángulo (iconos SVG integrados).
- **Tamaño del botón** — diámetro del botón, de 24 a 120 px.
- **Radio de las esquinas** — de 0% (cuadrado) a 50% (círculo).
- **Margen horizontal / vertical** — distancia respecto a los bordes de la pantalla.
- **Color de fondo**, **Color de fondo (hover)**, **Color del icono** — códigos hexadecimales.
- **Sombra** — añade una sombra suave bajo el botón.
- **z-index** — aumenta este valor si el botón aparece bajo otros elementos fijos (banner de cookies, chat, etc.).

Cada ajuste se valida al guardar: los colores deben ser códigos hexadecimales válidos, y tanto el tamaño como el radio están acotados para evitar cualquier visualización rota.

## Formas del botón

La forma se controla por completo mediante el **radio de las esquinas**:

- `50%` — círculo perfecto.
- `20%` — cuadrado con esquinas redondeadas.
- `0%` — cuadrado nítido.

## Compatibilidad con tu tema

El botón se inyecta mediante el hook `displayFooter`, presente en el tema Classic y en la gran mayoría de los temas de PrestaShop. Si tu tema personalizado no llama a este hook, el botón no aparecerá: basta con añadir la llamada al hook en la plantilla de pie de página del tema.

## Rendimiento y accesibilidad

- JavaScript nativo de unos 1,5 KB, sin jQuery ni dependencias externas.
- Seguimiento del desplazamiento mediante `requestAnimationFrame` y un listener pasivo, sin impacto perceptible en los Core Web Vitals.
- Botón nativo con atributo `aria-label` y foco de teclado visible.
- Respeta la preferencia del sistema `prefers-reduced-motion`: el desplazamiento se vuelve instantáneo si el usuario ha reducido las animaciones.
- Sin recopilación de datos personales — compatible con el RGPD por diseño.

## FAQ

### El botón no aparece, ¿qué debo comprobar?

Asegúrate de que tu tema implemente el hook `displayFooter` y de que hayas desplazado lo suficiente para superar el umbral de activación (300 px por defecto). Vacía también la caché de PrestaShop tras la instalación.

### ¿Puedo usarlo en multitienda?

Sí. Los ajustes se guardan mediante `Configuration` y se aplican según el contexto de tienda activo.

### ¿El módulo es realmente gratis?

Sí, bajo licencia gratuita, sin limitación de funciones.