Hoy día, hay cosas que aunque no están estandarizadas ni son obligadas en una web, cuando nos faltan las echamos de menos. Eso pasa con el botón de «volver arriba», de las webs. Y no por costumbre, sino por accesibilidad y facilidad de uso. Hoy veremos como implementar en enlace de volver arriba en Genesis Sample.
No es una implementación muy complicada. Sólo hay que seguir los pasos.
Creamos el archivo para las animaciones
Lo primero creamos un archivo llamado to-top.js, agregaremos este código y lo subimos a la carpeta JS del tema Genesis Sample. De manera que la ruta será /nuestro-child-theme/js/to-top.js
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
También tenemos que subir el icono del botón a la carpeta /images del tema. Lo podéis descargar de este enlace.
Creando el botón de volver arribe en Genesis
Lo siguiente será agregar la llamada al script y el enlace en forma de botón que mas tarde mostraremos. Esto lo hacemos añadiendo este código al archivo functions.php de nuestro tema.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Ya tenemos el botón de volver arriba añadido y el javascript para los efectos de transición de opacidad. Ahora queda el CSS. Darle estilo y el icono del botón. El CSS no es sólo para definir el grado de esa opacidad, sino también para mantenerlo fijo en una posición. En este caso abajo a la derecha, cerca del pulgar en caso de pantallas de smartphones.
Con añadir esto al final del fichero style.css del tema, sería suficiente.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
En algunos casos, y para proporcionar un poco más de accesibilidad, en pantallas pequeñas, ya que son táctiles y trabajamos con los dedos, le he aumentado un poco el tamaño. Yo creo que no soy el único que odia esos botones minúsculos de algunas apps y webs.
Ya comenté en la entrada de crear un portfolio en Genesis Sample que haría más tutoriales sobre este tema tan mejorado. Si tienes alguna duda que quieras que resuelva con un artículo o que dedique un tutorial a algo en lo que estás atascad@ deja un comentario o escríbeme a través del formulario de contacto. Si estás suscrito/a no te olvides de hacerlo a través de la Intranet, los mails de los suscriptores tienen preferencia.