Coloca un icono de retorno en cualquier punto de una página de tal manera que, al pinchar en él, se active un scroll suave hacia el inicio de la misma.
¿Quieres añadir puntos de retorno?
Me refiero a esos iconos con una flecha hacia arriba con los que el lector puede regresar a la parte superior de la entrada o página con solo hacer clic en ellos.
En el vídeo entenderás mejor a qué me refiero:
Esto puede ser muy interesante en páginas con muchos apartados.
¿Te interesa? A continuación te explico cómo introducir estos «puntos de retorno» en el child theme Genesis Sample.
Pasos para mostrar flechas de vuelta al inicio en Genesis Sample
1. Crea un fichero back-to-top.js
Inserta este código en un nuevo archivo llamado back-to-top.js:
Para ver este código, puedes identificarte o suscribirte.
Este script es el encargado de añadir el efecto de scroll suave hacia arriba.
2. Modifica el fichero functions.php
Ahora, pega el siguiente snippet al final del archivo functions.php:
Para ver este código, puedes identificarte o suscribirte.
Con estas líneas consigues varias cosas:
- Que el tema cargue la librería de Font Awesome.
- Que se cargue el fichero back-to-top.js, el cual se encarga de añadir el efecto de scroll suave hacia arriba.
- Incluyes un div justo al inicio de la página, que actuará como «punto de retorno».
3. Edita el archivo style.css
Por último, introduce el siguiente código al final de style.css:
Para ver este código, puedes identificarte o suscribirte.
Con este paso aplicas los estilos para que se muestre la flecha de regreso (de Font Awesome) y se coloque a la derecha.
4. Añade la flecha de retorno
Ya tienes todo el sistema montado, solo te queda seleccionar el HTML donde quieras agregar la flecha. Puede ser al final de cada apartado, al final de la entrada… donde desees.
Para ello, inserta esta línea:
<a class="toplink" href="#top"><i class="fas fa-level-up-alt"></i></a>¡Ya está!
Conclusiones
Mostrar flechas que permitan un retorno rápido al inicio de la página puede resultar muy útil para el lector, especialmente en artículos largos.
Si tú o tu cliente habéis visto este efecto en otra web y os gustado, ahora ya sabes cómo aplicarlo a Genesis Sample.
También tienes la opción agregarlo a cualquier otro child theme de Genesis realizando pequeñas modificaciones.
Si no lo consigues, déjame los detalles y el nombre de la plantilla donde te interesa aplicarlo en los comentarios para que cree un tutorial personalizado con tu pregunta.
Ventajas de ser suscriptor. 😉