Cómo Añadir un Botón de Volver Arriba en Carrd (Guía 2026)

Carrd.co es una opción popular para crear un sitio web de una página con poco presupuesto, pero los sitios largos de una sola página tienen una carencia de usabilidad: los visitantes acaban haciendo mucho scroll para volver arriba. Un botón de volver arriba lo soluciona con un único elemento Embed de Carrd y un poco de código para copiar y pegar.

Algunos tutoriales de Carrd:

• Añadir un Encabezado Fijo en Carrd
• Añadir un Aviso de Cookies en Carrd
• Cómo Añadir una Tabla de Precios a Carrd.co
• Análisis de Carrd.co
• Cómo Añadir Acordeones de FAQ Desplegables a Carrd.co
• Barra de Navegación Responsive para Móvil en Carrd

La lista completa de plugins, temas y tutoriales de Carrd la encuentras en mi sitio carrdme.com.

Requisitos previos: qué necesitas antes de empezar

Antes de empezar, asegúrate de tener:

• Carrd Pro Standard (19 $/año) o Pro Plus (49 $/año). El elemento Embed no está disponible en los planes Free ni Pro Lite. Esta es la razón más común por la que el botón “no funciona” para quienes siguen tutoriales en línea.
• Un sitio Carrd lo bastante largo para necesitarlo. Los botones de volver arriba funcionan mejor en páginas de más de unas 4 pantallas (según las directrices de NNGroup). En páginas Carrd cortas, el botón añade ruido visual sin beneficio real.

El embed no se previsualiza en el editor de Carrd. Tienes que publicar el sitio para verlo en vivo.

Combina este botón con un encabezado fijo para facilitar la navegación en páginas Carrd largas. Cuando termines, también puedes añadir un dominio personalizado a Carrd para darle a tu sitio un aspecto profesional.

Cómo añadir un botón de volver arriba en Carrd (paso a paso)

1. Añade un elemento Embed a tu sitio Carrd

Abre tu sitio Carrd en el editor. Haz clic en el botón + para añadir un nuevo elemento y selecciona Embed. Colócalo en cualquier parte de la página. Su posición en la lista de elementos no afecta a dónde aparece el botón (eso lo controla el CSS position: fixed).

Configura estas opciones:

• Type: Code
• Style: Hidden, Body End

La captura muestra la ubicación antigua en Head. Elige Body End en el segundo desplegable. El snippet contiene un <button> visible y un script, y ambos pertenecen al body de la página. Body End además garantiza que el botón ya existe antes de que el script lo busque.

2. Copia y pega el código del botón de volver arriba

Pega este código completo en el campo de código del elemento Embed:

<style>
  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  :root {
    --button-color: #555;
    --button-hover-color: #333;
    --arrow-color: white;
  }

  #scroll-to-top {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    width: 50px;
    height: 50px;
    background-color: var(--button-color);
    color: var(--arrow-color);
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 50%;
  }

  #scroll-to-top::before {
    content: "\25b2";
    font-size: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  #scroll-to-top:hover {
    background-color: var(--button-hover-color);
  }

  #scroll-to-top:focus-visible {
    outline: 2px solid var(--button-hover-color);
    outline-offset: 2px;
  }
</style>

<button id="scroll-to-top" aria-label="Back to Top"></button>

<script>
  const scrollToTopBtn = document.getElementById("scroll-to-top");

  function toggleButton() {
    if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
      scrollToTopBtn.style.display = "block";
    } else {
      scrollToTopBtn.style.display = "none";
    }
  }

  function scrollToTop() {
    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    window.scrollTo({ top: 0, behavior: reduceMotion ? "auto" : "smooth" });
    document.body.setAttribute("tabindex", "-1");
    document.body.focus({ preventScroll: true });
  }

  scrollToTopBtn.addEventListener("click", scrollToTop);

  let ticking = false;
  window.addEventListener("scroll", () => {
    if (!ticking) {
      window.requestAnimationFrame(() => {
        toggleButton();
        ticking = false;
      });
      ticking = true;
    }
  });

  toggleButton();
</script>

Qué cambió respecto a la versión original:

• La protección CSS prefers-reduced-motion evita el desplazamiento suave para usuarios con sensibilidad al movimiento
• aria-label="Back to Top" permite a los lectores de pantalla identificar el botón
• El contorno :focus-visible muestra a los usuarios de teclado dónde queda el foco
• Se reemplazó window.onscroll por un addEventListener limitado con requestAnimationFrame. Se dispara una vez por frame en lugar de más de 60 veces por segundo.
• Se reemplazó document.documentElement.scrollTop = 0 por window.scrollTo(). Desplaza suavemente, o salta al instante cuando el visitante tiene activado “Reducir movimiento” (un behavior: 'smooth' explícito anularía la protección CSS).
• document.body.focus() tras el desplazamiento mueve el foco arriba para los usuarios de teclado. El body recibe primero tabindex="-1", porque los navegadores ignoran focus() en un elemento que no es enfocable.
• El umbral de scroll subió de 200px a 400px. 200px se dispara casi de inmediato en la mayoría de pantallas.
• Se eliminó el onclick en línea. Se usa addEventListener para una separación más limpia.
• La llamada inicial a toggleButton() al cargar gestiona las páginas que cargan a mitad de scroll.
• Se eliminó el tabindex="0" innecesario. El elemento <button> es enfocable de forma nativa.

Personalizar tu botón de volver arriba en Carrd

Cambiar los colores del botón con variables CSS

El código usa tres propiedades personalizadas CSS en el bloque :root. Cámbialas para que combinen con el diseño de tu sitio:

Por ejemplo, para un botón azul: define --button-color: #2563eb y --button-hover-color: #1d4ed8.

Al igual que este botón, un alternador de modo oscuro también usa el elemento Embed de Carrd y variables CSS para la personalización.

Ajustar el tamaño y la posición del botón

El botón mide 50x50px por defecto, lo que supera el objetivo táctil mínimo de 44x44px de WCAG 2.5.5 (AAA). Para cambiarlo:

• Ancho y alto: edita las propiedades width y height en #scroll-to-top
• Tamaño de la flecha: edita el font-size en #scroll-to-top::before
• Posición: edita las propiedades bottom y right en #scroll-to-top para controlar la distancia a los bordes de la pantalla
• z-index: el valor por defecto es 99. Si el botón queda oculto detrás de otros elementos de Carrd (encabezados fijos, modales), prueba 9999

Añadir una etiqueta de texto al botón

Para añadir una etiqueta de texto, reemplaza el enfoque del pseudo-elemento ::before por texto en línea. Cambia el HTML del botón a:

<button id="scroll-to-top" aria-label="Back to Top">&#9650; Top</button>

Y elimina o comenta la regla CSS #scroll-to-top::before. Ajusta el width del botón a auto y añade algo de padding para que quepa el texto.

Accesibilidad y cumplimiento WCAG de tu botón de volver arriba

El código actualizado de arriba incluye varias correcciones de accesibilidad. Aquí explicamos por qué importan.

Navegación por teclado y compatibilidad con lectores de pantalla

El botón usa un elemento <button> nativo, que es enfocable por defecto. El atributo aria-label="Back to Top" da a los lectores de pantalla una descripción que anunciar en lugar de leer un botón vacío.

Después de que la página se desplace arriba, document.body.focus() mueve el foco del teclado a la parte superior de la página (el tabindex="-1" establecido justo antes hace al body enfocable desde el script sin añadirlo al orden de Tabulación). Sin esto, los usuarios de teclado quedan atrapados a mitad de página: se desplazan visualmente arriba pero su tecla Tab sigue en medio del documento.

El contorno :focus-visible muestra a los usuarios de teclado exactamente dónde está el foco, sin mostrar un anillo en los clics de ratón.

Respetar las preferencias de movimiento reducido

El envoltorio @media (prefers-reduced-motion: no-preference) garantiza que scroll-behavior: smooth solo se aplique cuando el usuario no ha pedido movimiento reducido en los ajustes de su sistema operativo. El script ejecuta la misma comprobación matchMedia antes de llamar a window.scrollTo(), así que el botón también sigue ese ajuste. Para usuarios con sensibilidad al movimiento, la página salta al instante hasta arriba en lugar de animarse. Esto puede prevenir náuseas y vértigo.

Verificación: prueba tu botón de volver arriba

Tras publicar tu sitio Carrd, recorre esta lista:

Asegúrate de que tu botón no entre en conflicto con tu barra de navegación responsive para móvil.

Solución de problemas: errores comunes del botón de volver arriba en Carrd

Métodos alternativos para añadir un botón de volver arriba en Carrd

Usar IntersectionObserver en lugar de eventos de scroll

En lugar de escuchar cada evento de scroll, puedes colocar un <div> centinela arriba de la página y usar IntersectionObserver para detectar cuándo sale del viewport. El botón aparece cuando el centinela deja de ser visible.

Este enfoque es más eficiente (sin manejador de eventos de scroll), se adapta automáticamente al tamaño de pantalla y funciona con el hilo compositor del navegador. El soporte en navegadores supera el 97% a nivel global.

Widget de volver arriba de Common Ninja (alternativa sin código)

Common Ninja ofrece un widget gratuito de Back to Top Button que se incrusta con una única etiqueta script. Gestiona accesibilidad, animaciones y personalización mediante un editor visual. Funciona para usuarios no técnicos que prefieren no editar código.

Scroll Points nativos de Carrd (cero código)

Carrd tiene un elemento integrado Scroll Point Control que crea anclajes enlazables en la página. Coloca un Scroll Point llamado top en la parte más alta de tu página y añade un enlace de pie de página a #top. Sin comportamiento de mostrar/ocultar automático, pero cero código personalizado.

Plugins de terceros para Carrd

El ecosistema de plugins de Carrd está creciendo. Sitios como carrdme.com ofrecen plugins para pestañas, acordeones y otros componentes que amplían Carrd más allá de sus funciones integradas.

Conclusión

Añadir un botón de volver arriba a tu sitio Carrd lleva un elemento Embed y unos minutos. El código de esta guía incluye correcciones de accesibilidad (soporte de teclado, etiquetas para lectores de pantalla, respeto al movimiento reducido) que muchos tutoriales en línea omiten.

Para una experiencia de navegación completa, añade también desplazamiento suave y enlaces de anclaje a tu sitio Carrd. Quizá también quieras un menú flotante para más opciones de navegación.