Añade un atractivo y funcional botón «Ir arriba» en tu Web

¿Eres de escribir entradas largas? Entonces seguro que te gustaría tener en tu web una forma sencilla de subir hacia la parte superior de tu página. Tú quieres un botón ir arriba, pero sin tener un botón molestando todo el tiempo.

Algo que sea sexy, moderno, y suba con un cierto efecto suave.

Y seguro que te has fijado que esta web tiene una flechita para subir arriba en el lado derecho, pero que solo aparece cuando ya has superado un porcentaje de la página al hacer scroll.

¿Ok?

Bien, ahora que ya has bajado rápidamente la página, has visto el botón ir arriba, y has hecho clic para volver aquí, te voy a explicar como puedes poner uno en tu web.

Confiésalo, lo has hecho; y encima te he arrancado una sonrisa. 😀

Y como sabes, soy de los que si puedo, no uso ningún plugin y le meto mano al código.

¿Nos metemos en harina?

Cómo insertar un botón ir arriba con código

Es algo sencillo, si sigues los pasos al pie de la letra.

Te lo voy a dar todo «mascadito».

Aquí si que va a ser necesario acceder a tu servidor por FTP, ya que hay que crear algún fichero dentro de la carpeta de tu Child Theme.

Paso 1. Sube los ficheros js necesarios.

Descarga estos dos ficheros:

  • main.js
  • modernizr.js –> Este lo traen ya muchos temas, y no suele ser necesario descargarlo ni subirlo. Es estándar, y cualquier versión te sirve.

Si no se descargan directamente, haz clic con el botón derecho y luego en «Guardar enlace como…»

Sube ambos ficheros a wp-content/themes/tuchildtheme/js/

Si no existe la carpeta js dentro de tu Child Theme, créala.

Si editas el fichero main.js, podrás cambiar algunos ajustes del efecto de volver arriba.

 

La variable offset nos sirve para indicar cuando se activara el «botón». En este caso al bajar 300px.

Al principio saldrá como medio transparente, y si pones el ratón encima, se vuelve opaco. Esa transparencia es la que definimos en offset_opacity.

Y por último, en scroll_top_duration, es donde se especifica cuanto durara la animación de volver arriba. Su usas textos excesivamente largos, te puede interesar subir este valor.

Paso 2. Edita el fichero functions.php

Ahora tenemos que llamar estos ficheros javascript que hemos creado, para que carguen con la web, y añadir el efecto de volver arriba.

Para eso vamos a añadir estas lineas a tu fichero functions.php que esta en wp-content/themes/tuchildtheme/

 

Con esto ya tendremos el botón funcionando en nuestra web.

Paso 3. Añade algo de estilo

Tienes el botón funcionando, pero apenas se ve, y queda feo.

Así que añade algo de estilo.

Copia y pega estas lineas en el fichero styles.css que esta en wp-content/themes/tuchildtheme/

/* --------------------------------        Back to Top  -------------------------------- */  .cd-top {    display: inline-block;    height: 40px;    width: 40px;    position: fixed;    bottom: 40px;    right: 10px;    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);    /* image replacement properties */    overflow: hidden;    text-indent: 100%;    white-space: nowrap;    background: rgba(34, 121, 196, 0.8) url(img/cd-top-arrow.svg) no-repeat center 50%;    visibility: hidden;    opacity: 0;    -webkit-transition: opacity .3s 0s, visibility 0s .3s;    -moz-transition: opacity .3s 0s, visibility 0s .3s;    transition: opacity .3s 0s, visibility 0s .3s;  }  .cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {    -webkit-transition: opacity .3s 0s, visibility 0s 0s;    -moz-transition: opacity .3s 0s, visibility 0s 0s;    transition: opacity .3s 0s, visibility 0s 0s;  }  .cd-top.cd-is-visible {    /* the button becomes visible */    visibility: visible;    opacity: 1;  }  .cd-top.cd-fade-out {    /* if the user keeps scrolling down, the button is out of focus and becomes less visible */    opacity: .5;  }  .no-touch .cd-top:hover {    background-color: #2279C4;    opacity: 1;  }  @media only screen and (min-width: 768px) {    .cd-top {      right: 20px;      bottom: 20px;    }  }  @media only screen and (min-width: 1024px) {    .cd-top {      height: 60px;      width: 60px;      right: 30px;      bottom: 60px;    }  }

Puedes cambiar el color sustituyendo el que esta en la linea 38. Simplemente borra #2279C4, y pon el color que te vaya bien.

Si quieres el botón redondo, puedes añadir debajo de la linea 26, y antes del }, lo siguiente: «border-radius: 50%;»

Cómo ves, no es más que aplicar estilo CSS, para que este más acorde con nuestro tema.

¿Es o no sencillo añadir un botón Ir arriba?

Además fíjate que en esta ocasión no es necesario usar Genesis Framework.

Esto es válido para cualquier tema. Los hooks usados son estándar de WordPress.

Lo único en lo que cómo ves he insistido, es en usar un Child Theme, para que al actualizar no pierdas estos cambios.

Poner un botón para volver arriba es un recurso sencillo, que facilita la navegación de nuestro sitio web, y cómo ves algo no muy complicado de implementar.

Y tu, ¿qué trucos usas para mejorar el uso de tu web?

Acceso gratuito
a la Academia de
Hormigas en la Nube

+20 cursos disponibles sobre herramientas, marketing y ventas

Por tiempo limitado estoy regalando el acceso a la librería de recursos de la Academia de Hormigas en la Nube.

Cursos de ActiveCampaign, Elementor, Beaver Builder, WordPress, Copywriting, ventas, email marketing y más te estan esperando dentro. Disponible gratis por tiempo limitado.

Mockup escritorio herramientas
Ir arriba