Cómo agregar un botón fijo de regreso a la parte superior a su sitio web

Publicado: 2023-02-12

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.

TODO.

EL.

FORMA.

A.

EL.

ARRIBA.

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, 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 fijo de volver a 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.

Cosas a considerar antes de agregar un botón 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?

Aquí hay algunas preguntas para responder antes de crear su botón de desplazamiento hacia arriba:

  • ¿Dónde se colocará?
  • ¿Qué tan grande (o pequeño) debe ser?
  • ¿Qué patrones de diseño debe seguir para que se mantenga en la marca? (Piense en colores, fuentes, iconos, etc.)
  • ¿Corre el riesgo de cubrir contenido importante del sitio, como información en una barra lateral?
  • ¿Qué sucede en los dispositivos móviles? ¿Será receptivo?
  • ¿Realmente lo necesitas?*

*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.

¡O mira este video tutorial sobre cómo agregar un botón pegajoso de regreso a la parte superior!

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="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><ruta d="M12 6H0l6-6z"/></svg>
  <span class="screen-reader-text">Volver al principio</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">Volver al principio</span>

Esto es fundamental para los usuarios que utilizan 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-enlace {
  transición: todos .25s facilidad de entrada y salida;
  posición: fija;
  inferior: 0;
  derecha: 0;
  pantalla: en línea-flexible;
  
 cursor: puntero;
 alinear elementos: centro;
 justificar-contenido: centro;
 margen: 0 3em 3em 0;
 borde-radio: 50%;
 relleno: .25em;
 ancho: 80px;
 altura: 80px;
 color de fondo: #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 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.

 .espectáculo {
    visibilidad: visible;
    opacidad: 1;
  }
  
  .esconder {
    visibilidad: oculto;
    opacidad: 0;
  }

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

 SVG {
 relleno: #000;
 ancho: 24px;
 altura: 12px;
}
&: pasar el cursor {
 color de fondo: #E8E8E8;
 	SVG {
	 relleno: #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.

 // Texto destinado solo para lectores de pantalla.
.texto-lector-de-pantalla {
	posición: absoluta;
	clip-path: recuadro (50%);
	margen: -1px;
	borde: 0;
	relleno: 0;
	ancho: 1px;
	altura: 1px;
	desbordamiento: oculto;
	ajuste de línea: normal! importante;
	clip: rect(1px, 1px, 1px, 1px);
	&:enfocar {
		bloqueo de pantalla;
		arriba: 5px;
		izquierda: 5px;
		índice z: 100000; // Arriba de la barra de herramientas de WP
		clip-path: ninguno;
		color de fondo: #eee;
		relleno: 15px 23px 14px;
		ancho: automático;
		altura: automático;
		texto-decoración: ninguno;
		altura de línea: normal;
		color: #444;
		tamaño de fuente: 1em;
		clip: auto !importante;
	}
}

¡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.

 // Establecer una variable para nuestro elemento de botón.
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 = () => {
  // Obtener el valor de desplazamiento actual
  sea ​​y = ventana.scrollY;
  
  // Si el valor de desplazamiento es mayor que la altura de la ventana, agreguemos una clase al botón de desplazamiento hacia arriba para mostrarlo.
  si (y > 0) {
    scrollToTopButton.className = "mostrar enlace superior";
  } demás {
    scrollToTopButton.className = "ocultar enlace superior";
  }
};

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).

 ventana.addEventListener("desplazamiento", 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 = () => {
  // Establecemos una variable para el número de píxeles que estamos desde la parte superior del documento.
  const c = documento.documentElement.scrollTop || documento.cuerpo.scrollTop;
  
  // Si ese número es mayor que 0, retrocederemos hasta 0, o la parte superior del documento.
  // También animaremos ese pergamino con requestAnimationFrame:
  // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
  si (c > 0) {
    ventana.requestAnimationFrame(scrollToTop);
    // ScrollTo toma una coordenada x y ay.
    // ¡Aumente el valor '10' para obtener un desplazamiento más suave/lento!
    ventana.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.

 // Cuando se haga clic en el botón, ¡ejecuta nuestra función ScrolltoTop arriba!
scrollToTopButton.onclick = function(e) {
  e.preventDefault();
  vuelve al comienzo();
}

¡Eso es todo! Ahora tendrá un botón adhesivo para volver a la parte superior completamente funcional y personalizable en su sitio de WordPress.