Cómo agregar un botón pegajoso de volver arriba a su sitio web

Todos hemos estado allí. Encontró una guía en línea fantástica, se desplazó hasta el final y luego pensó: "¡Vaya, me encantaría ver qué más tiene para ofrecer este sitio!"

Pero luego tienes que desplazarte.

TODOS.

LA.

CAMINO.

A.

LA.

PARTE SUPERIOR.

Y luego piensas…. "Hmmm, no importa". Y cierra la página.

Como diseñador web, esto es lo último que quiere que alguien haga cuando llega a un sitio que está construyendo. Afortunadamente, el año es 2019 y las mejores prácticas de diseño web moderno nos han dado la solución a este problema común de UX: el botón pegajoso de volver arriba.

¿Qué es un botón pegajoso de volver arriba?

También conocido como botón de desplazamiento a la parte superior o imagen de ir a la parte superior, el botón fijo de regreso a la parte superior es un elemento de navegación útil que ayuda a los usuarios a volver a la parte superior de la página web que están viendo. Un patrón de interfaz de usuario común es colocar este botón en la esquina inferior derecha de la pantalla, haciéndolo "pegajoso" a través de una posición fija para que siempre esté accesible cuando el usuario se desplaza hacia abajo en la página.

Aspectos a tener en cuenta antes de añadir un botón de volver al principio

Como cualquier tendencia de diseño popular, lo animo a dar un paso atrás antes de implementarlo en su sitio para preguntarse: si voy a construir esto, ¿qué pautas debo seguir para el botón superior?

*Nota: podría argumentar que los usuarios de hoy en día están condicionados a desplazarse hacia abajo (¡y retroceder!) en una página, lo que eliminaría la "necesidad" de un botón para volver al principio. Mi consejo: ¡pruébalo! Agregue un evento de Google Analytics al hacer clic o use una herramienta de mapa de calor como Hotjar para ver cómo los visitantes de su sitio interactúan con la página.

¡La mejor "mejor práctica" a seguir es una basada en datos de su propio sitio y usuarios!

Cómo agregar un botón pegajoso de regreso a la parte superior a su sitio de WordPress

En este tutorial, le mostraré cómo agregar el botón de volver arriba exacto que usamos aquí en Layout. La única diferencia es que colocamos el nuestro en un encabezado fijo en la parte superior de la pantalla, en lugar de en la esquina inferior derecha. (¡Pero no te preocupes, es el mismo concepto!)

Consejo profesional: si bien este tutorial no es demasiado avanzado, aún recomiendo probarlo en un sitio de prueba o en un entorno local, de modo que no haya ningún riesgo para su sitio en vivo. Si necesita configurar uno rápidamente, consulte Local, una aplicación local gratuita de WordPress que es increíblemente fácil de usar.

¡Empecemos! Recorreré cada paso del proceso, y también puedes seguir este Codepen del propio ingeniero de front-end de Flywheel, Josh Masen.

Vea el botón Desplazarse hacia arriba del Pen ES6 de Josh Lawler (@joshuamasen) en CodePen.

Para este tutorial de botones pegajosos de regreso a la parte superior, usaremos tres idiomas:

• HTML para el marcado para crear el botón
• CSS para diseñar el botón y hacer que coincida con su marca
• JavaScript para que “funcione” y defina los comportamientos del botón

En el HTML, encontrará las siguientes líneas:

<a class="top-link hide" href="" id="js-top">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><path d="M12 6H0l6-6z"/></svg>
  <span class="screen-reader-text">Back to top</span>
</a>

¡Este va a ser tu botón pegajoso de volver arriba! Puede ver que hemos agregado una clase de CSS llamada .top-link y estamos usando JavaScript simple para "hacer que funcione". También estamos usando un SVG en línea para el botón.

Además de un SVG, también puede usar un archivo de imagen o un icono de fuente para crear el botón. Sin embargo, preferimos el método SVG porque:

1. No se pixelará en diferentes tamaños de pantalla, como lo haría una imagen de trama.
2. Los SVG son universalmente compatibles con todos los navegadores. (¡Sí, experiencia de usuario!)
3. Es fácil diseñar con CSS, por lo que puede cambiar todo muy fácilmente.
4. Solo se necesita una línea de código, lo que lo hace liviano y mejor para el rendimiento del sitio.

La última pieza realmente importante que encontrará en el HTML es esta línea:

<span class="screen-reader-text">Back to top</span>

Esto es fundamental para los usuarios que operan con lectores de pantalla y mejorará la accesibilidad de su sitio de WordPress. (Piense en ello como una etiqueta alternativa para una imagen, ¡pero para su botón de desplazamiento hacia arriba!)

Ahora hablemos más sobre esa clase de CSS, .top-link . Estamos usando esto para realzar el estilo del botón, y es donde definirá cualidades como qué tan grande será, cuánto relleno debe haber alrededor, el color, etc.

.top-link {
  transition: all .25s ease-in-out;
  position: fixed;
  bottom: 0;
  right: 0;
  display: inline-flex;
  
 cursor: pointer;
 align-items: center;
 justify-content: center;
 margin: 0 3em 3em 0;
 border-radius: 50%;
 padding: .25em;
 width: 80px;
 height: 80px;
 background-color: #F8F8F8;

Nota: estamos usando Sass (un lenguaje de hojas de estilo) para escribir nuestro CSS un poco más rápido. Obtenga más información sobre este preprocesador aquí.

Un par de piezas importantes de este fragmento: transition: all .25s ease-in-out ; controla qué tan "rápido" aparecerá o desaparecerá su botón en la pantalla, y la position: fixed ; es lo que hace que el botón se “pegue” a la ubicación que desea.

A continuación, verá las reglas para .show y .hide . Usaremos JavaScript para cambiar entre estas clases para decirle al navegador cuándo debe (o no) aparecer el botón en la página.

  .show {
    visibility: visible;
    opacity: 1;
  }
  
  .hide {
    visibility: hidden;
    opacity: 0;
  }

Antes de entrar en el JavaScript, solo hay unas pocas líneas más que agregaremos al CSS.

svg {
 fill: #000;
 width: 24px;
 height: 12px;
}

&:hover {
 background-color: #E8E8E8;

 	svg {
	 fill: #000000;
	}
}

Estas clases estilizarán la imagen SVG para la flecha y le indicarán al navegador cómo mostrar el botón cuando un usuario pase el mouse sobre él.

Finalmente, agregaremos algo de CSS para ocultar el texto que dice "volver al principio" para los lectores de pantalla.

// Text meant only for screen readers.
.screen-reader-text {
	position: absolute;
	clip-path: inset(50%);
	margin: -1px;
	border: 0;
	padding: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	word-wrap: normal !important;
	clip: rect(1px, 1px, 1px, 1px);

	&:focus {
		display: block;
		top: 5px;
		left: 5px;
		z-index: 100000; // Above WP toolbar
		clip-path: none;
		background-color: #eee;
		padding: 15px 23px 14px;
		width: auto;
		height: auto;
		text-decoration: none;
		line-height: normal;
		color: #444;
		font-size: 1em;
		clip: auto !important;
	}
}

¡Ahora vamos con el JavaScript! Vamos a hacer esto sin cargar jQuery, lo que ayudará a que su código sea ligero y rápido de cargar.

La primera variable ayudará al navegador a encontrar el botón.

// Set a variable for our button element.
const scrollToTopButton = document.getElementById('js-top');

A continuación, crearemos una función que muestre el botón de desplazamiento hacia arriba si el usuario se desplaza más allá de la altura de la ventana inicial.

const scrollFunc = () => {
  // Get the current scroll value
  let y = window.scrollY;
  
  // If the scroll value is greater than the window height, let's add a class to the scroll-to-top button to show it!
  if (y > 0) {
    scrollToTopButton.className = "top-link show";
  } else {
    scrollToTopButton.className = "top-link hide";
  }
};

También agregaremos un detector de eventos, que observará a medida que el usuario se desplaza (para que sepamos dónde se encuentra en la página).

window.addEventListener("scroll", scrollFunc);

¡Casi termino! A continuación, debemos definir la función que hace que el botón lleve al usuario al principio de la página. Para hacer eso, crearemos una variable para la cantidad de píxeles que estamos desde la parte superior de la página. Si ese número es mayor que 0, la función lo restablecerá a 0, ¡llevándonos a la cima!

También agregaremos una pequeña animación aquí, para que el salto no sea demasiado repentino.

const scrollToTop = () => {
  // Let's set a variable for the number of pixels we are from the top of the document.
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  
  // If that number is greater than 0, we'll scroll back to 0, or the top of the document.
  // We'll also animate that scroll with requestAnimationFrame:
  // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    // ScrollTo takes an x and a y coordinate.
    // Increase the '10' value to get a smoother/slower scroll!
    window.scrollTo(0, c - c / 10);
  }
};

Por último, pero no menos importante, solo tenemos que decirle a la página que ejecute esa función cuando alguien haga clic en nuestro botón pegajoso de volver al principio.

// When the button is clicked, run our ScrolltoTop function above!
scrollToTopButton.onclick = function(e) {
  e.preventDefault();
  scrollToTop();
}

Siguiente: Descubra los 19 plugins de WordPress que adoran los desarrolladores

¡Descargue este libro electrónico para obtener una lista de nuestros complementos más recomendados para desarrolladores! Descubrimos que todos estos complementos son fáciles de usar, no tienen un rendimiento demasiado alto en su sitio y son francamente confiables.

¡Eso es todo! Ahora tendrá un botón adhesivo para volver a la parte superior completamente funcional y personalizable en su sitio de WordPress. Para ver el tutorial completo en acción, recuerda revisar este Codepen del propio ingeniero front-end de Flywheel, ¡Josh Masen!