Desplácese hasta arriba en Vanilla JavaScript

En esta breve guía práctica, aprenda cómo implementar la funcionalidad de desplazamiento hacia arriba en JavaScript estándar, así como también cómo diseñar y animar el botón.

Introducción

Cada vez que tenga un sitio web que solicite a los usuarios que se desplacen hacia abajo durante mucho tiempo, ¡ofrecer un botón para desplazarse de regreso a la parte superior es un buen gesto!

En esta guía práctica, aprenderemos a crear un botón HTML/CSS/JS animado para desplazarse hasta la parte superior en Vanilla JavaScript.

{.icon aria-hidden=“true”}

Nota: El código fuente está disponible en GitHub.

Comenzando

Crearemos la funcionalidad desde cero y le daremos estilo. Usando un querySelector(), seleccionaremos el botón creado y activaremos y desactivaremos su visibilidad en función de dónde se encuentre el usuario en la página, y activaremos un evento para desplazarse hacia la parte superior con cada clic.

If you'd like to read about creating a scroll-to-top in React, read our Cómo desplazarse hacia arriba en React con un componente de botón!

Debido a que el botón está fijo en una ubicación determinada (abajo a la derecha) usando los atributos de “posición” de CSS, el marcado para esta funcionalidad puede insertarse en cualquier lugar dentro del elemento “cuerpo” de su código HTML:

1
2
3
<div className="scroll-to-top">
    <span class="btn btn-position btn-style">^</i>
</div>

Una vez agregado, podemos diseñar el botón y su padre <div>. Fijaremos la posición del botón en la parte inferior derecha, desplazándolo un poco de la parte inferior y del lado derecho:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.scroll-to-top {
  position: relative;
}

.btn-position {
  position: fixed;
  bottom: 40px;
  right: 25px;
  z-index: 20;
}

.btn-style {
  background-color: #551b54;
  border: 2px solid #fff;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  color: #fff;
  cursor: pointer;
  animation: movebtn 3s ease-in-out infinite;
  transition: all 0.5s ease-in-out;
  font-size: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
}

Hemos establecido la “visibilidad” de este botón en “oculto” de forma predeterminada, de modo que el botón solo aparece cuando el usuario se ha desplazado hacia abajo a una posición particular (eje Y); lo haremos alterando su propiedad con JavaScript más tarde. Finalmente, agreguemos un desplazamiento y alguna animación al botón para que no se quede quieto:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.icon-style:hover {
  animation: none;
  background: #fff;
  color: #551b54;
  border: 2px solid #551b54;
}

@keyframes movebtn {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(20px);
  }
  50% {
    transform: translateY(0px);
  }
  75% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}

Implementando la lógica {#implementando la lógica}

Ahora que el botón tiene estilo y es invisible, implementemos la lógica que lo hace visible una vez que el usuario se desplaza hacia abajo. Lo seleccionaremos mediante querySelector() y adjuntaremos un EventListener al elemento:

1
const scrollBtn = document.querySelector(".btn");

Ahora, según la posición del valor Y de la ventana (cuánto se ha desplazado verticalmente el usuario, comenzando en 0), estableceremos la visibilidad del elemento en "visible" o "oculto" si el valor Y está por debajo de cierto umbral:

1
2
3
4
5
6
7
const btnVisibility = () => {
    if (window.scrollY > 400) {
        scrollBtn.style.visibility = "visible";
    } else {
        scrollBtn.style.visibility = "hidden";
    }
};

Ahora tenemos una función que, cuando se llama, comprueba si la página web se ha desplazado hacia abajo hasta 400 y establece la visibilidad del elemento del botón en visible; de lo contrario, lo establece en oculto.

Finalmente, querremos llamar repetidamente a esta función para verificar repetidamente la posición y ajustar la visibilidad en consecuencia. Esto se hace mejor a través de un detector de eventos que activa la función en cada cambio de desplazamiento:

1
2
3
document.addEventListener("scroll", () => {
    btnVisibility();
});

El último fragmento de código que deseamos adjuntar a un detector de eventos es la lógica para hacer retroceder al usuario mediante programación cuando haga clic en un botón. ¡La función scrollToTop() de la instancia window hace justamente eso! Podemos establecer qué es "arriba", al proporcionar una coordenada Y, y podemos llamar al método en cada evento "clic" en el botón:

1
2
3
4
5
6
scrollBtn.addEventListener("click", () => {
    window.scrollTo({
        top: 0,
        behavior: "smooth"
    });
});

{.icon aria-hidden=“true”}

Nota: window.scrollTo() tiene un parámetro de comportamiento que indica si el desplazamiento debe progresar suavemente (suavemente) o instantáneamente en un solo paso (auto el valor predeterminado).

¡Eso es todo! Intente desplazarse hacia abajo en la página; aparecerá un botón animado. Una vez que lo haga y haga clic en él, volverá sin problemas a la parte superior de la página:

scroll to top in vanilla javascript

Conclusión

Desplazarse hasta la parte superior de la página no es difícil, ¡incluso con detectores de eventos y animaciones! En esta guía práctica, aprendimos cómo implementar la funcionalidad de desplazamiento hacia arriba con Vanilla JavaScript y cómo diseñar el botón.