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 ⬆</button>
</body>
<script src="./logica.js"></script>
</html>