Tutorial WordPress: Crear un botón “Volver arriba” fijo con solo HTML y CSS

Introducción

Este tutorial explica paso a paso cómo crear en WordPress un botón fijo Volver arriba usando únicamente HTML y CSS. Incluye ejemplos listos para pegar, variantes para insertar el HTML en tu tema o en el editor, y recomendaciones de accesibilidad y compatibilidad. Ten en cuenta que, sin JavaScript, no es posible detectar la posición de scroll y mostrar u ocultar el botón automáticamente al alcanzar un umbral el botón podrá estar siempre visible o bien oculto por diseño hasta que el usuario interactúe con la página.

Requisitos previos

Acceso al código del tema (mejor usar un child theme) o permiso para añadir HTML/CSS mediante el Editor de bloques o Widgets (Custom HTML y CSS adicional).
Conocimientos básicos para editar archivos como footer.php o para pegar CSS en Apariencia → Personalizar → CSS adicional.
Conocer las limitaciones: sin JavaScript no se puede detectar la posición de scroll para mostrar/ocultar el botón dinámicamente.

Concepto básico

El botón consiste en un enlace que apunta a la parte superior de la página (por ejemplo a un elemento con id=top o al propio lthtmlgt), posicionado con CSS de forma fija en la esquina inferior derecha (u otra ubicación). Para suavizar el desplazamiento se utiliza la propiedad CSS scroll-behavior. Para accesibilidad se añade aria-label y estilos de foco claros.

Código mínimo — HTML

Ejemplo HTML que debes colocar en el footer (por ejemplo antes del cierre del footer o en un bloque HTML dentro del pie):

lt!-- Marca un ancla en el tope del documento si tu header ya tiene id=top no hace falta esto --gt
lta id=top style=display:nonegtlt/agt

lt!-- Botón Volver arriba --gt
lta href=#top class=back-to-top aria-label=Volver arribagt
  lt!-- Puedes usar texto, un símbolo, o un SVG aquí --gt
  ↑
lt/agt

Código mínimo — CSS

Este CSS muestra un botón circular y accesible en la esquina inferior derecha, con transición, foco visible y soporte para usuarios que prefieren reducir animaciones:

/ Suavizado del scroll en navegadores que lo soportan /
html {
  scroll-behavior: smooth
}

/ Botón fijo /
.back-to-top {
  position: fixed
  right: 20px
  bottom: 20px
  width: 44px
  height: 44px
  padding: 0
  background: #0b5cff / color primario, cámbialo según tu diseño /
  color: #fff
  text-decoration: none
  border-radius: 50%
  display: inline-flex
  align-items: center
  justify-content: center
  box-shadow: 0 6px 18px rgba(11,92,255,0.18)
  z-index: 9999
  font-size: 20px
  line-height: 1
  transition: transform 160ms ease, opacity 160ms ease
  opacity: 0.95
}

/ Hover y foco /
.back-to-top:hover,
.back-to-top:focus {
  transform: translateY(-3px)
  outline: none
  box-shadow: 0 10px 22px rgba(11,92,255,0.22)
}

/ Indicador de foco accesible (para teclado) /
.back-to-top:focus {
  box-shadow: 0 0 0 4px rgba(11,92,255,0.18)
}

/ Tamaño mayor en pantallas táctiles si se desea /
@media (max-width: 480px) {
  .back-to-top {
    right: 14px
    bottom: 14px
    width: 48px
    height: 48px
    font-size: 22px
  }
}

/ Usuarios que prefieren reducir movimiento /
@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: none
  }
}

Inserción en WordPress — Métodos recomendados

Usando un Child Theme (editar footer.php)

Abre el archivo footer.php de tu child theme y pega el bloque HTML del botón justo antes del cierre del ltbodygt (en la práctica antes de wp_footer() o donde tengas salida del pie de página).
Usando un bloque HTML en el Editor de Bloques

Si tu plantilla usa bloques, puedes añadir un bloque HTML personalizado en la parte final del site (en la plantilla de pie de página) y pegar el HTML del botón. Luego añade el CSS en Apariencia → Personalizar → CSS adicional.
Usando un Widget HTML Personalizado

Apariencia → Widgets → Pie de página (o área de widgets del tema). Añade un widget HTML Personalizado con el HTML del botón y pega el CSS en el Customizer o en la hoja de estilos del child theme.
Insertar desde functions.php (opcional, con PHP)

Si prefieres inyectarlo automáticamente desde el functions.php de tu child theme, puedes añadir un snippet que imprima el HTML en el hook wp_footer. Ejemplo:
```
add_action(wp_footer, function() {
  echo lta id=top style=display:nonegtlt/agt
  echo lta href=#top class=back-to-top aria-label=Volver arribagt↑lt/agt
})
    
```
Recuerda usar un child theme y probar en un entorno de desarrollo antes de aplicar en producción.

Ejemplo completo (HTML CSS juntos)

Puedes usar este conjunto tal cual: pega el HTML en el pie de página (o widget HTML) y el CSS en Apariencia → Personalizar → CSS adicional o en tu style.css del child theme.

lta id=top style=display:nonegtlt/agt
lta href=#top class=back-to-top aria-label=Volver arribagt
  ↑
lt/agt
lt!-- Asegúrate de añadir el CSS siguiente en tu hoja de estilos --gt

html { scroll-behavior: smooth }

.back-to-top {
  position: fixed
  right: 20px
  bottom: 20px
  width: 44px
  height: 44px
  background: #0b5cff
  color: #fff
  text-decoration: none
  border-radius: 50%
  display: inline-flex
  align-items: center
  justify-content: center
  box-shadow: 0 6px 18px rgba(11,92,255,0.18)
  z-index: 9999
  font-size: 20px
  transition: transform 160ms ease, opacity 160ms ease
}

.back-to-top:hover,
.back-to-top:focus { transform: translateY(-3px) }
.back-to-top:focus { box-shadow: 0 0 0 4px rgba(11,92,255,0.18) }
@media (prefers-reduced-motion: reduce) { .back-to-top { transition: none } }

Variantes y mejoras sin JavaScript

Usar un icono SVG en lugar del símbolo ↑ para mayor consistencia visual.
Hacer el botón más discreto (opacidad baja) y aumentar la opacidad en :hover o :focus.
Colocarlo en la esquina inferior izquierda o centrarlo horizontalmente, ajustando right/left y bottom.
Combine con enlaces de saltar al contenido (skip links) para mejorar la navegación por teclado.

Accesibilidad, contraste y pruebas

Añade aria-label legible como Volver arriba para lectores de pantalla.
Garantiza contraste mínimo entre fondo y color de ícono (WCAG 2.1 recomienda al menos 4.5:1 para texto pequeño).
Proporciona un indicador de foco (outline o box-shadow) claramente visible para usuarios de teclado.
Prueba en dispositivos móviles y comprueba que el botón no bloquee elementos interactivos importantes (ajusta la posición si es necesario).
Para usuarios que prefieren reducir movimiento, respeta la preferencia con @media (prefers-reduced-motion: reduce).

Limitaciones y notas finales

Sin JavaScript no es posible establecer un umbral de scroll para mostrar el botón solo después de desplazarse una cierta distancia. Si necesitas ese comportamiento (mostrar el botón solo tras 300px, por ejemplo), será necesario añadir un pequeño script. Si tu objetivo es mantener la solución estrictamente en HTML/CSS, la opción más práctica es tener el botón siempre visible o poco intrusivo (opacidad baja) y con buen contraste al pasar el foco/hover.

Resumen técnico

Coloca un ancla en la parte superior (id=top) o usa la que ya exista en tu header.
Pega el HTML del botón en el pie de la página (footer.php, widget HTML o bloque HTML).
Añade el CSS en el Customizer o en style.css del child theme.
Verifica accesibilidad (aria-label, foco visible) y compatibilidad móvil.

SushiHost