Un enlace para volver arriba, ¿qué es?
Un enlace para volver arriba en HTML es lo que se llama un ancla. Si quieres saber más sobre las anclas en general y cómo usarlas, te recomendamos leer el tutorial Colocar un ancla en una página web.
Para permitir volver arriba, necesitamos por tanto añadir un ancla que apunte a la parte superior de la web.
Insertar el enlace "Volver arriba"
En primer lugar, ve a Configuración > Ajustes > Zonas editables para editar tu pie de página e insertar el enlace (esta parte se puede modificar a partir de una oferta Pro).
En la zona de la parte inferior de tu web, añade una fila o una nueva columna y elige el Editor HTML.
Copia y pega después el siguiente enlace HTML:
<a href="#" class="btn btn-default">Volver arriba ↑</a>Puedes cambiar el texto Volver arriba ↑ por otro y sustituir las clases btn btn-default por btn btn-primary para dar otro estilo a tu botón.
Ejemplo:
<a href="#" class="btn btn-primary">Principio de la página</a>Cuando estés conforme, guarda.
Al probar tu enlace, notarás que te lleva bruscamente a la parte superior de la web.
Para evitar este comportamiento y hacer que la página se desplace suavemente hacia arriba, hay que añadir una regla CSS (compatible con la mayoría de los navegadores recientes).
Siempre en Configuración > Ajustes > Zonas editables, copia y pega el siguiente código CSS en el campo Estilos CSS adicionales y guarda:
html {
scroll-behavior: smooth;
}Ahora puedes cambiar al editor visual haciendo clic en el botón correspondiente, arriba a la derecha de la zona de edición, y aplicar otros estilos a tu botón.
Aquí tienes, por ejemplo, un botón centrado y en cursiva.
A tener en cuenta
Algunas plantillas, como la plantilla Blogger, integran de forma nativa un botón para volver arriba.
El botón aparece entonces automáticamente abajo a la derecha de la página después de desplazarte lo suficiente hacia abajo.
No dudes en guardar la configuración de tu plantilla actual y en probar otras plantillas para descubrir las funciones que te ofrecen.
