Botón 'Volver arriba' flotante con estilo y animaciones

hugodev

Hola a todos,

Estoy intentando añadir un botón flotante de 'Volver arriba' en mi tienda PrestaShop 1.7.0.2 con el tema Classic. La idea es que sea circular, tenga una sombra sutil y una animación fluida al pasar el ratón por encima. Además, debe ser responsivo para móviles.

He puesto este CSS en /themes/classic/assets/css/custom.css pero no termina de quedar bien, especialmente la animación y la sombra, y no sé si el z-index es el correcto para que no se solape con otras cosas (como un popup de newsletter o el aviso de cookies).

#back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #007bff;
    color: #ffffff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;

¿Alguna idea de cómo mejorarlo para que tenga esa animación fluida y una sombra más elegante, además de que funcione bien en móviles?

daniela8923

¡Qué tal, @hugodev!

El CSS que has puesto es un buen comienzo. Para la animación fluida, te falta añadir la propiedad transition al botón. Así, cuando cambie el background-color o cualquier otra propiedad al hacer hover, lo hará de forma suave y no de golpe.

Respecto al z-index, 999 suele ser suficiente para la mayoría de los elementos, pero si tienes popups muy agresivos o barras de cookies con un z-index más alto (como 1000 o 9999), tu botón podría quedar por debajo. Es algo que tienes que revisar en la consola del navegador cuando tengas esos elementos activos.

rubendigital

Coincido con @daniela8923 en lo de transition. Para la sombra, usa box-shadow. Puedes ponerle un valor que le dé un poco de profundidad sin ser demasiado intrusivo. Algo como box-shadow: 0px 3px 6px rgba(0,0,0,0.16); suele verse bien.

Y sobre la responsividad, necesitarás una media query para ajustar el tamaño y la posición del botón en pantallas más pequeñas. A veces, en móvil es mejor que sea un poco más pequeño o que esté en otra esquina para no tapar contenido importante.

Milo

Hola @hugodev,

Para conseguir el efecto que buscas, hay que refinar el CSS que ya tienes, incorporando las transiciones, una sombra adecuada y ajustes para móviles. Aquí te dejo una versión del código que puedes añadir a tu custom.css que debería darte el resultado esperado:

#back-to-top {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background-color: #007bff;
    color: #ffffff;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;

Explicación de los cambios:

display: flex; justify-content: center; align-items: center;: Esto centra el contenido (por ejemplo, un icono de flecha) perfectamente dentro del círculo, reemplazando text-align y line-height para mayor flexibilidad.
opacity: 0; visibility: hidden;: Estas propiedades, junto con transition, permiten una aparición y desaparición suave del botón. display: none se activa instantáneamente, pero opacity y visibility se pueden animar.
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, background-color 0.3s ease, box-shadow 0.3s ease;: Define una transición suave de 0.3 segundos para múltiples propiedades, incluyendo la opacidad, visibilidad, color de fondo y sombra, al cambiar de estado.
box-shadow: Se añade una sombra sutil para darle ese efecto de elevación. En el hover, la sombra se intensifica ligeramente para un efecto más dinámico.
z-index: 1000;: Se eleva ligeramente el z-index para asegurar que el botón esté por encima de la mayoría de los elementos, incluyendo los modales o barras de cookies comunes.
@media (max-width: 767px): Una media query para dispositivos móviles. Reduce el tamaño y ajusta la posición del botón para que no ocupe demasiado espacio en pantallas pequeñas.

Recuerda que la lógica para mostrar/ocultar el botón en función del scroll y para realizar el desplazamiento suave hacia arriba sigue necesitando un poco de JavaScript, pero con este CSS, el botón se verá y animará como deseas.

hugodev

¡Muchísimas gracias, @Milo! Acabo de probar el CSS que me has dado en custom.css y funciona a la perfección.

El efecto de transition con opacity y visibility es justo lo que buscaba, y el box-shadow le da un toque muy elegante. Además, la media query para móvil se ve genial.

Ya tengo la parte de JavaScript, así que con tu CSS, el botón de 'Volver arriba' está impecable. ¡Problema resuelto, de verdad!