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

Aunque hoy en día temas como Astra Theme lo traen de serie, hay muchos que aun no lo incluyen. Y te interesa incluirlo por 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 tres 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.
  • cd-top-arrow.svg –> El icono de la imagen que usaremos como «subir arriba».

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

Sube los tres 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.

//browser window scroll (in pixels) after which the "back to top" link is shown
var offset = 300,
	//browser window scroll (in pixels) after which the "back to top" link opacity is reduced
	offset_opacity = 1200,
	//duration of the top scrolling animation (in ms)
	scroll_top_duration = 700;

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/

//* Enqueue scripts and styles
add_action( 'wp_enqueue_scripts', 'hormi_enqueue_scripts_styles' );
function hormi_enqueue_scripts_styles() {

	wp_enqueue_script( 'modernizr-min', get_stylesheet_directory_uri() . '/js/modernizr.js', array( 'jquery' ), '', true );
	wp_enqueue_script( 'back_to_top', get_stylesheet_directory_uri() . '/js/main.js', array( 'jquery' ), '', true );
}

//* Añadimos el botón antes de </body>
add_action ( 'wp_footer', 'hormi_back_to_top' );
function hormi_back_to_top() {
   echo '<a href="#0" class="cd-top">Top</a>';
}

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(js/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?

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

  1. Muy ben consejo, Javier, el uso de child theme y no poner demasiados plugins.

    Yo tengo un caso particular en la actualización de woocommerce y los atributos «Variaciones» de producto, resulta que una de las últimas actualizaciones del plugin han cambiado como cargar las variaciones cuando son más de 20 opciones.

    Con este simple código colocado dentro de functions.php se solucionó:

    function custom_wc_ajax_variation_threshold( $qty, $product ) {
    return 10;
    }

    add_filter( ‘woocommerce_ajax_variation_threshold’, ‘custom_wc_ajax_variation_threshold’, 10, 2 );

    —–
    en mi caso he cambiado el return 10 x return 60

    1. Gracias por el aporte David.

      Gran ejemplo de que con unas cuantas lineas nos ahorramos un plugin en nuestra instalación, y no es necesario a veces ni tener conocimientos avanzados, si no saber buscar bien, y aplicar algo de lógica.

      Un abrazo.

  2. Genial entrada Javier!

    Me voy a poner a ello en cuanto pueda, porque yo soy de escribir entradas (muy) largas y me vendrá genial. Además no quería instalar un plugin solo para añadir el botón, y por eso lo estaba dejando de lado.

    Yo de momento utilizo poco css para mejorar el uso de la web. Tengo líneas para eliminar el título de algunas páginas concretas sin usar un plugin, y también tengo líneas en css para cambiar el diseño del formulario de contacto que viene con Jetpack (sobre todo los colores).

    Aunque me parece que lo de Jetpack va a durar poco, porque estoy mirando de quitarlo. Seguramente me pasaré a contact form 7.

    Por cierto, he intentado enviarte un correo pero siempre me dice que tengo que habilitar las cookies y no me deja. Y lo he probado con varios navegadores ya.

    Un saludo! 🙂

    1. Hola Borja.

      Para cosillas como esta, son plugins que no suelen ocupar o mermar mucho el rendimiento, pero si lo solucionas con unas lineas de código, mejor que mejor. Cuando le cojas el truco a php, hooks y CSS consigues maravillas.

      Y si, jetpack sin duda fuera para mi. Mejor usar Contact Form 7, y para el resto de funciones, tampoco son fundamentales.

      Un abrazo.

  3. Muy útil, Javier. Mañana mismo lo pondré en mi web!!!.
    Creo que tiene un pequeño error, en el footer se ve perfecto, pero en la zona blanca de la web, se ve sólo la mitad. Con ponerle un z-index alto a la clase .no-touch .cd-top se soluciona 😉
    Un saludo!.

  4. ¡Hola Javier!

    Importante el uso del Child Theme y muy acertado el mancharse las manos de harina para evitar algún que otro plugin 🙂

    Yo soy mucho de Bootstrap, así que aprovechando que ya lo uso en mi tema y utilizando iconos de su librería he conseguido ahorrar alguna que otra línea de código para insertar el botón.

    Un saludo!

    1. Genial recurso tirar de Bootstrap. En esta misma web lo uso para tablas de precios o cosas similares.

      El código asusta a muchos, cierto, pero si con estas entradas consigo que más de uno se ahorre un plugin, mucho mejor!

      Un fuerte abrazo Sergio.

  5. Hola Javier, en primer lugar quiero darte las gracias por aportar luz con este post a este asunto del botón arriba que quiero implantar en mi web.

    Siguiendo los pasos que nos expones, me ocurre que me sale el cuadradito pero no se ve la flechita dentro. Seguro que hay alguna cosa que se me escapa, pero creo que he seguido correctamente tus pasos ¿? Ya me comentas cuando puedas que puede ser.

    Un saludo.

Los comentarios están cerrados.

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