Tus clientes te agradecerán que añadas un botón para volver arriba en Squarespace. Pero esta función es un poco más complicada de lo que parece. Squarespace no tiene un botón nativo para volver arriba. Tendrás que solucionarlo con un widget sin código, un poco de código personalizado o un enlace de anclaje.
Vale totalmente la pena hacerlo. Las páginas de destino largas y las entradas de blog extensas dejan a los visitantes varados al final de un largo desplazamiento. En dispositivos móviles, donde se concentra la mayor parte de la navegación hoy en día, desplazarse con el pulgar hasta arriba es una forma rápida de perder la atención de un visitante.
Un botón para volver arriba mantiene a las personas navegando por tu sitio en lugar de abandonarlo. Es un pequeño ajuste de navegación que respalda una estrategia más amplia sobre cómo crear un sitio web que realmente mantenga a las personas interesadas.
Esta guía recorre primero el método más sencillo sin código y luego cubre dos alternativas para quien desee más control de diseño o una opción integrada más básica.
El método más sencillo: usa un widget para volver arriba en Squarespace
La opción más rápida es encontrar un widget prediseñado para volver arriba. Por ejemplo, el widget Volver arriba de Jotform es una herramienta gratuita y sin código que puede poner estos botones en funcionamiento en tus páginas en solo unos minutos. Puedes usarlo para diseñar un botón flotante, generar un código de inserción e integrarlo en Squarespace sin tocar una sola línea de CSS o JavaScript.
El proceso es el siguiente:
1. Personaliza tu widget. Usa el enlace de arriba para abrir el creador de widgets de Jotform y empieza a ajustar los parámetros. Puedes cambiar los estilos de los iconos, establecer el tamaño y el radio de las esquinas de tu botón e incluso elegir colores que coincidan con tu marca. El widget facilita mover el botón por la pantalla, ajustar el espaciado en los bordes y alternar la visibilidad para los usuarios de escritorio y móviles.
2. Obtén el código de inserción. Una vez que el botón tenga el aspecto que deseas, Jotform genera un código de inserción listo para usar. Sin instalar complementos, sin pasos de configuración, sin complicaciones.
3. Pégalo en Squarespace. Aquí es donde entra en juego la interfaz actual de Squarespace. Tienes dos opciones principales:
- En todo el sitio (recomendado para botones para volver arriba): En tu panel de Squarespace, ve a Páginas en el menú de la izquierda, desplázate hacia abajo para encontrar la sección Código personalizado y haz clic en Inyección de código. Pega el código de inserción en el campo Pie de página y haz clic en Guardar. El botón aparecerá automáticamente en todas las páginas. (Nota: La inyección de código en todo el sitio está disponible en los planes Business y superiores.)
- Solo una página: Edita la página donde quieres que aparezca el botón, haz clic en el + para añadir un bloque y elige Código. Pega el código de inserción allí y guarda. El botón aparecerá solo en esa página, pero puedes repetir este proceso en cualquier página que lo necesite.
Eso es todo. Actualiza tu sitio y el botón aparecerá, listo para llevar a los visitantes de vuelta a la parte superior de la página. Si alguna vez has seguido los pasos para añadir un formulario a Squarespace, el proceso de inserción aquí te resultará idéntico.
Algunas razones prácticas por las que este método tiende a ser el camino de menor resistencia:
- Se actualiza automáticamente. Si decides cambiar el color o la posición el mes que viene, solo tienes que editar la configuración de tu widget en Jotform. El widget en vivo reflejará entonces el cambio. Sin volver a pegar código.
- Funciona junto con otros widgets gratuitos para sitios web que quizás desees, como barras de anuncios, feeds sociales o botones de contacto. Todos usan el mismo enfoque de inserción.
- Funciona bien con el resto de tu configuración de Squarespace. Si también captas clientes potenciales a través de formularios, la integración de Jotform + Squarespace facilita añadir nuevos formularios, pagos y captación de clientes potenciales usando el mismo patrón de inserción.
Para la mayoría de los usuarios de Squarespace, aquí es donde termina el proyecto. Pero si quieres un control total a nivel de píxeles, sigue leyendo.
Método alternativo: añade un botón para volver arriba en Squarespace con código personalizado
Si te sientes cómodo con HTML, CSS y un poco de JavaScript, puedes crear un botón flotante para volver arriba completamente desde cero. Squarespace admite oficialmente el código personalizado a través del panel de Inyección de código, el panel de CSS personalizado y los Bloques de código individuales.
Solo ten en cuenta el tiempo que esto requiere. Tendrás más flexibilidad sobre el botón en sí, pero también necesitarás probar y solucionar más problemas. Por lo tanto, esta opción suele ser adecuada solo para desarrolladores que necesitan un aspecto muy específico. También podrías usarla si deseas un control específico sobre la animación, los umbrales de desplazamiento o el comportamiento en los puntos de ruptura.
Así es cómo hacerlo.
- Elige dónde se ubicará el código. Para un botón que deba aparecer en todo el sitio, usa Sitio web → Páginas → Inyección de código → Pie de página. El código añadido aquí se inyecta justo antes de la etiqueta de cierre </body> en todas las páginas. Para un botón puntual en una página específica, pasa el cursor sobre la página en el panel de Páginas, haz clic en el icono de engranaje, elige Avanzado y usa en su lugar Inyección de código del encabezado de la página.
- Añade el HTML. Coloca un elemento de botón con un ID para poder dirigirte a él más tarde. A menudo se ve algo así: <button id=”backToTop” aria-label=”Back to top”>↑ Top</button>. Asegúrate de conservar el aria-label para facilitar la accesibilidad con los lectores de pantalla.
- Dale estilo con CSS. Ahora editas la apariencia y el rendimiento del botón con CSS. Comienza abriendo el panel de CSS personalizado (en Sitio web → Herramientas del sitio web → CSS personalizado). Posiciona el botón como fijo en la parte inferior derecha. Luego ocúltalo de forma predeterminada estableciendo opacity: 0 y pointer-events: none. También querrás una transición que aparezca de forma suave cuando se añada una clase como .visible. Por último, establece un valor de z-index lo suficientemente alto como para que quede por encima de tu contenido pero por debajo de cualquier modal.
- Añade la lógica de JavaScript. También necesitas un pequeño script que vigile la posición de desplazamiento. De esa manera, el botón aparece solo cuando es relevante para el usuario. Por ejemplo, una vez que el visitante se desplaza más allá de un umbral elegido (por ejemplo, 300 píxeles), el script añade automáticamente la clase .visible y el botón aparecerá. Si el usuario hace clic en el botón, llama a window.scrollTo({ top: 0, behavior: ‘smooth’ }), que desplaza la página de vuelta a la parte superior con una animación suave.
La mayor ventaja de este enfoque es la libertad de diseño, pero eso no es algo que la mayoría de las empresas necesite. Los widgets y herramientas como Jotform Apps para crear aplicaciones sin código ofrecen suficiente flexibilidad para personalizar el botón y pueden ahorrarte mucho tiempo de programación. Además, no tendrás que actualizar tu código cada vez que Squarespace publique un nuevo cambio estructural en sus plantillas.
Solución sencilla: usa un enlace de anclaje como atajo para volver arriba
Si en realidad no necesitas un botón flotante, sino solo un enlace clicable de Volver arriba al final de secciones largas, la función integrada de enlaces de anclaje de Squarespace hace el trabajo sin ningún código. Squarespace añadió esta función en 2025 como parte de Squarespace 7.1. Así es como funciona:
- Establece el ancla en tu sección superior. Haz clic en Editar en la página donde quieres el atajo para volver arriba. Pasa el cursor sobre la primera sección y haz clic en Editar sección. Desde ahí, desplázate hasta el campo Enlace de anclaje, que está en la parte inferior del panel de configuración de la sección. Escribe un slug como “top” y haz clic en el icono de copiar para obtener tu URL.
- Añade un enlace para volver arriba donde quieras. Añade un bloque de botón o un bloque de texto más abajo en la página. Resalta el texto o el botón, haz clic en el icono de enlace y pega la URL de anclaje. Cuando un visitante haga clic en él, la página saltará de vuelta a esa sección superior.
- Opcional: suaviza el desplazamiento. Los enlaces de anclaje llevan al usuario a la parte superior de la página de forma instantánea, lo que puede resultar brusco e interrumpir su inmersión en tu sitio. Soluciónalo añadiendo una animación de desplazamiento suave. Ve a Sitio web → Páginas → CSS personalizado y añade:
html {
scroll-behavior: smooth;
}Esa única línea aplica un desplazamiento suave a todos los enlaces de anclaje de tu sitio.
Este método tiene algunos límites evidentes. No es flotante, por lo que los visitantes ven el enlace solo en ciertos puntos de la página (normalmente al final de secciones largas o cerca del pie de página). Tampoco aparecerá automáticamente en todas las páginas, como lo hará un widget o un botón de código personalizado en todo el sitio. Sin embargo, para entradas de blog largas, páginas de ventas o sitios de una sola página que solo necesitan un desplazamiento rápido hacia arriba, un enlace de anclaje suele ser suficiente.
Nota: Los enlaces de anclaje no tienen soporte directo en las secciones de blog, eventos, portafolio o tienda. Para usarlos en estas páginas, debes añadir una sección en blanco encima de la no compatible y anclar a esa en su lugar. Puedes hacer que esto se vea bien desactivando la opción Rellenar pantalla en la configuración de la sección en blanco. De lo contrario, tendrás un hueco incómodo en la parte superior de la página.
Añade un botón para volver arriba sin complicar demasiado Squarespace
Si buscas la forma más fácil de añadir estos botones sin complicar tu Squarespace, un widget sin código es la opción más rápida y flexible. Por ejemplo, con el widget para volver arriba de Jotform, puedes diseñar, insertar y actualizar sin escribir nunca una línea de código.
El código personalizado te da control total sobre el diseño, lo cual es útil si tienes objetivos visuales muy específicos. La función nativa de enlaces de anclaje es una buena solución, pero no te da tanto control. Sea cual sea tu elección, adapta el método a lo que tu sitio necesita y no construyas de más.
Prueba hoy el widget para volver arriba para añadir un pulido botón de desplazamiento hacia arriba a tu sitio de Squarespace en minutos. Y si ya usas Jotform para formularios de Squarespace, el proceso de inserción te resultará familiar desde el primer clic.
Preguntas frecuentes sobre los botones para volver arriba en Squarespace
Un widget de botón para volver arriba es una pequeña herramienta insertable que añade un botón flotante para desplazarse hacia arriba a tu sitio web. Cuando un visitante se desplaza más allá de cierto punto de la página, el botón aparece. Al hacer clic en él, el usuario regresa instantáneamente a la parte superior de la página. Es útil en páginas de contenido extenso y en sitios con mucho tráfico móvil.
En Squarespace 7.1, abre el editor de tu sitio y haz clic en Editar en la sección del encabezado. En el panel izquierdo, busca la pestaña Elementos y activa Botón. Desde ahí, puedes editar el texto, el estilo, la alineación y el destino del enlace del botón. El botón aparecerá en todo el sitio en el encabezado, lo cual es útil para llamadas a la acción principales como Reservar una llamada o Registrarse.
Para posicionar un botón en la parte superior de la pantalla, usa position: fixed, luego establece top: 0 y, según la esquina que desees, left: 0 o right: 0. Asegúrate de añadir un valor de z-index como 999 para que el botón se mantenga por encima del resto del contenido. Puedes aplicar esto a través de Sitio web → Herramientas del sitio web → CSS personalizado en Squarespace.
Este artículo es para propietarios de sitios web de Squarespace, gestores de contenido, diseñadores web, equipos de marketing y cualquiera que quiera mejorar la navegación de su sitio añadiendo un botón para volver arriba sin complicar demasiado la configuración de su sitio web.
Enviar Comentario: