• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Mostrar flecha para volver al inicio de una página en Genesis Sample

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 y los otros 1801 snippets de esta web,
identifícate o suscríbete aquí.

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 y los otros 1801 snippets de esta web,
identifícate o suscríbete aquí.

Con estas líneas consigues varias cosas:

  • Que el child theme 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 y los otros 1801 snippets de esta web,
identifícate o suscríbete aquí.

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 del child theme donde te interesa aplicarlo en los comentarios para que cree un tutorial personalizado con tu pregunta.

Ventajas de ser suscriptor. 😉

Cabecera CSS Genesis Framework Genesis Sample HTML Javascript PHP

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes login o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?