0

Estoy tratando que funcione este botón de scroll. Cuando carga la página el mismo se oculta como se espera pero, al hacer scroll o posicionarme al final de la página, este no aparece.

Hice algunas pruebas quitándole la clase que lo oculta, pero al pulsar sobre el botón, no quiere hacer el scroll para llevarme al inicio de la página.

Dejo el código para ver que estoy haciendo mal.

const d = document;
const w = window;

export const scroll = (selector = "") => {
    const btn_scroll = d.querySelector(selector);

    w.addEventListener("scroll", (e) => {
        let scrollTop = w.pageYOffset || d.documentElement.scrollTop;
        if (scrollTop > 500) {
            btn_scroll.classList.remove("hidden");
        } else {
            btn_scroll.classList.add("hidden");
        }
    });

    btn_scroll.addEventListener("click", (e) => {
        if (e.target.matches(selector) || e.target.matches(`${selector}`)) {
            w.scrollTo ({
                behavior: "smooth",
                top: 0,});

        }
    });

}


//Aquí es donde va el módulo donde lo exporto y lo estoy cargando
/*d.addEventListener("DOMContentLoaded", (e) => {
    scroll(".scroll-top-btn");
});*/

El CSS:

.scroll-top-btn {
  position: fixed;
  z-index: 999;
  bottom: 1vh;
  right: calc(4.25rem + 1vw);
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  font-size: 2rem;
  font-weight: bold;
  background-color: var(--main-color);
  color: var(--color2);
  cursor: pointer;
  outline: 0;
  border: 0;
  transition: all 0.3s ease-out;
}

.scroll-top-btn:hover {
  background-color: var(--color2);
  color: var(--main-color);
}

.hidden {
  visibility: hidden;
  opacity: 0;
}

El html:

<button type="button" class="scroll-top-btn hidden" >Volver al inicio &#11014;</button>
2
  • Una pregunta: ¿Por qué haces el if del event.target.matches? Me parece un poco raro porque hasta donde entiendo btn_scroll ya es la propiedad a la que estás atando el evento scroll. Entonces no entiendo para que la validación dentro de ese evento que tú mismo ataste a una propiedad que deseas darle click
    – gaidyjg
    el 30 ago. a las 15:02
  • Estoy en un curso y el profesor lo maneja de esa manera para detectar el objeto. el 31 ago. a las 17:54

1 respuesta 1

1

hice algunas modificaciones en el código, simplificando un poco. Hice algunos comentarios para que lo entiendas mejor.

En el css cambie la propiedad visibility: hidden; por display: none

Ya que queremos que el boton desaparezca siempre que no lo necesitemos, de esta forma ahorramos espacio.

const d = document;
const w = window;

// Declaro un limite de cuando se va a mostrar el boton
const showButtonLimit = 1000;
// De una vez identifico que classe quiero capturar con el querySelector
const btn_scroll = d.querySelector(".scroll-top-btn");


const scrollContainer = () => {
  return document.documentElement || document.body;
};

//De esta forma no tienes que exportar la función, siempre se invocara cuando
//se haga escroll

d.addEventListener("scroll", () => {
  if (scrollContainer().scrollTop > showButtonLimit) {
    btn_scroll.classList.remove("hidden");
  } else {
    btn_scroll.classList.add("hidden");
  }
});

//La función que llamara el boton para volver al incio.
const goTop = () => {
  d.body.scrollIntoView({
    behavior: "smooth",
  });
};

//Capturamos el evento click del boton
btn_scroll.addEventListener("click", goTop);
.scroll-top-btn {
    position: fixed;
    z-index: 999;
    bottom: 1vh;
    right: calc(4.25rem + 1vw);
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    font-size: 2rem;
    font-weight: bold;
    background-color: var(--main-color);
    color: var(--color2);
    cursor: pointer;
    outline: 0;
    border: 0;
    transition: all 0.3s ease-out;
  }
  
  .scroll-top-btn:hover {
    background-color: var(--color2);
    color: var(--main-color);
  }
  
  /* .hidden {
    visibility: hidden;
    opacity: 0;
  } */


.hidden {
    display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./stilos.css">
</head>
<body>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus, asperiores? Quas illo reiciendis labore natus deleniti soluta optio hic nemo esse! Dolor, obcaecati adipisci? Debitis odio alias saepe unde assumenda.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus, asperiores? Quas illo reiciendis labore natus deleniti soluta optio hic nemo esse! Dolor, obcaecati adipisci? Debitis odio alias saepe unde assumenda.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus, asperiores? Quas illo reiciendis labore natus deleniti soluta optio hic nemo esse! Dolor, obcaecati adipisci? Debitis odio alias saepe unde assumenda.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus, asperiores? Quas illo reiciendis labore natus deleniti soluta optio hic nemo esse! Dolor, obcaecati adipisci? Debitis odio alias saepe unde assumenda.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus, asperiores? Quas illo reiciendis labore natus deleniti soluta optio hic nemo esse! Dolor, obcaecati adipisci? Debitis odio alias saepe unde assumenda.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus, asperiores? Quas illo reiciendis labore natus deleniti soluta optio hic nemo esse! Dolor, obcaecati adipisci? Debitis odio alias saepe unde assumenda.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus, asperiores? Quas illo reiciendis labore natus deleniti soluta optio hic nemo esse! Dolor, obcaecati adipisci? Debitis odio alias saepe unde assumenda.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus, asperiores? Quas illo reiciendis labore natus deleniti soluta optio hic nemo esse! Dolor, obcaecati adipisci? Debitis odio alias saepe unde assumenda.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus, asperiores? Quas illo reiciendis labore natus deleniti soluta optio hic nemo esse! Dolor, obcaecati adipisci? Debitis odio alias saepe unde assumenda.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus, asperiores? Quas illo reiciendis labore natus deleniti soluta optio hic nemo esse! Dolor, obcaecati adipisci? Debitis odio alias saepe unde assumenda.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus, asperiores? Quas illo reiciendis labore natus deleniti soluta optio hic nemo esse! Dolor, obcaecati adipisci? Debitis odio alias saepe unde assumenda.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus, asperiores? Quas illo reiciendis labore natus deleniti soluta optio hic nemo esse! Dolor, obcaecati adipisci? Debitis odio alias saepe unde assumenda.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus, asperiores? Quas illo reiciendis labore natus deleniti soluta optio hic nemo esse! Dolor, obcaecati adipisci? Debitis odio alias saepe unde assumenda.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus, asperiores? Quas illo reiciendis labore natus deleniti soluta optio hic nemo esse! Dolor, obcaecati adipisci? Debitis odio alias saepe unde assumenda.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus, asperiores? Quas illo reiciendis labore natus deleniti soluta optio hic nemo esse! Dolor, obcaecati adipisci? Debitis odio alias saepe unde assumenda.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus, asperiores? Quas illo reiciendis labore natus deleniti soluta optio hic nemo esse! Dolor, obcaecati adipisci? Debitis odio alias saepe unde assumenda.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus, asperiores? Quas illo reiciendis labore natus deleniti soluta optio hic nemo esse! Dolor, obcaecati adipisci? Debitis odio alias saepe unde assumenda.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus, asperiores? Quas illo reiciendis labore natus deleniti soluta optio hic nemo esse! Dolor, obcaecati adipisci? Debitis odio alias saepe unde assumenda.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus, asperiores? Quas illo reiciendis labore natus deleniti soluta optio hic nemo esse! Dolor, obcaecati adipisci? Debitis odio alias saepe unde assumenda.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus, asperiores? Quas illo reiciendis labore natus deleniti soluta optio hic nemo esse! Dolor, obcaecati adipisci? Debitis odio alias saepe unde assumenda.</p>






    <button class="scroll-top-btn hidden">Volver al inicio &#11014;</button>
</body>
<script src="./logica.js"></script>
</html>

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.