https://purificacion-tolima.gov.co/SiteAssets/V3/Componentes/ScrollTop/scrollTop.js

1/* Inicio funcion boton subir arriba  */
2
3const backGoToUpElement = document.querySelector(".scrollTop");
4
5backGoToUpElement.addEventListener("click", backGoToUp, false);
6
7function backGoToUp() {
8  document.body.scrollTop = document.documentElement.scrollTop = 0;
9}
10
11window.addEventListener("scroll", () => {
12  let scrollTop = document.documentElement.scrollTop;
13  scrollTop > 0
14    ? (backGoToUpElement.style.transform = "scale(1)")
15    : (backGoToUpElement.style.transform = "scale(0)");
16});
17
18/* Fin funcion boton subir arriba  */
19
20// ---------------- El siguiente codigo es por si no funciona el primero ----------------
21
22document.addEventListener("DOMContentLoaded", () => {
23  /* Inicio funcion boton subir arriba  */
24  /* Estas líneas de código seleccionan los elementos HTML con los ID "s4-workspace" y "scrollTop"
25    respectivamente y asignándolos a las variables `pageContainer` y `scrollButton` usando el
26    Métodos `document.getElementById()` y `document.querySelector()`. Estas variables se utilizan luego en
27    los detectores de eventos para agregar funcionalidad al botón de desplazamiento y al contenedor de la página. */
28  const pageContainer = document.getElementById("s4-workspace");
29  const scrollButton = document.querySelector(".scrollTop");
30
31  pageContainer.addEventListener("scroll", () => {
32    /* Este código verifica si la posición de desplazamiento vertical del elemento `pageContainer` es mayor
33    que o igual a 400 píxeles. Si es así, establece la propiedad `transform` del
34    elemento `scrollButton` a `scale(1)` (lo que hace que el botón sea visible). Si no lo es, entonces
35    establece la propiedad `transform` del elemento `scrollButton` en `scale(0)` (que oculta el
36    botón). Este código es responsable de mostrar u ocultar el botón de desplazamiento hacia arriba según el
37    posición de desplazamiento del usuario. */
38    pageContainer.scrollTop >= 400
39      ? (scrollButton.style.transform = "scale(1)")
40      : (scrollButton.style.transform = "scale(0)");
41
42    /* Esta línea de código comprueba si el usuario se ha desplazado hasta la parte superior de la página (donde `scrollTop`
43    es igual a 0) y si es así, establece la opacidad del elemento `scrollButton` a 1, haciéndolo
44    visible. */
45
46    if (pageContainer.scrollTop > 0) scrollButton.style.opacity = "1";
47  });
48
49  scrollButton.addEventListener("click", () => {
50    /* Este código verifica si el usuario se ha desplazado hacia abajo en la página (es decir, `scrollTop` es mayor que
51      0). Si el usuario se ha desplazado hacia abajo, utiliza el método `scrollTo()` para desplazar la página hacia atrás.
52      hasta la parte superior (es decir, `scrollTo(0, 0)`). Esto es parte de la funcionalidad para "volver arriba"
53      botón. */
54    if (pageContainer.scrollTop > 0) pageContainer.scrollTo(0, 0);
55    /* `scrollButton.style.opacity = "0";` establece la opacidad del elemento `scrollButton` en 0,

56    haciéndolo invisible. Esto es parte de la funcionalidad del botón "desplazarse hacia arriba", donde el
57    El botón debe desaparecer después de que el usuario haga clic en él y la página se desplace hacia arriba. */
58    scrollButton.style.opacity = "0";
59  });
60  /* Fin funcion boton subir arriba  */
61});