Hej allí,
No soy un desarrollador, pero intento configurar una pequeña página web privada para la celebración de mi boda y quiero agregar un botón de desplazamiento hacia arriba. Estoy programando el sitio web manualmente usando VSC. Mi problema es que puedo generar el botón correctamente usando HTML y CSS, pero el JS no parece funcionar y no tengo idea de qué está mal. Sí, JS está habilitado en el navegador.
Así que agrego este botón en HTML:
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
y vincule mi archivo .js en el encabezado de la página HTML con
<script type="text/javascript" src="javascript.js"> </script>
Luego agrego el CSS:
#myBtn { display: none; position: fixed; bottom: 20px; right: 30px; z-index: 99; border: none; outline: none; background-color: red; color: white; cursor: pointer; padding: 15px; border-radius: 10px; font-size: 18px; } #myBtn:hover { background-color: #555; }Cuando configuro la propiedad de visualización en "bloquear", el botón muestra dónde se supone que debe estar. El efecto de desplazamiento también funciona bien.
Luego agregué el archivo .js; De hecho, solo copié y pegué el código de W3Schools. Cuando no funcionó, traté de jugar con él, pero no encontré ninguna solución.
Se supone que el botón aparece cuando la página se desplaza hacia abajo 20px y desaparece cuando es menos. Sin embargo, el botón nunca aparece sin importar cuánto me desplace por la página.
//Get the button: mybutton = document.getElementById("myBtn"); // When the user scrolls down 20px from the top of the document, show the button window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { mybutton.style.display = "block"; } else { mybutton.style.display = "none"; } } // When the user clicks on the button, scroll to the top of the document function topFunction() { document.body.scrollTop = 0; // For Safari document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera }Sería genial si alguien pudiera ayudarme con esto.
Agregué el elemento <button> dentro del elemento <body> y le di altura al elemento <body> para que se pudiera activar el evento onscroll . En este caso, <button> funciona bien cuando se activa el evento onscroll . La barra de desplazamiento debe estar abierta para que se active el evento onscroll . La height de la página debe ser mayor que la altura de la pantalla completa para que se abra la barra de desplazamiento.
mybutton = document.getElementById("myBtn"); function scrollFunction() { console.log(document.body.scrollTop ) console.log(document.documentElement.scrollTop) if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) mybutton.style.display = "block"; else mybutton.style.display = "none"; } function topFunction() { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; } window.onscroll = function() { scrollFunction() } scrollFunction(); body{ height: 804px; } #myBtn { display: none; position: fixed; bottom: 20px; right: 30px; z-index: 99; border: none; outline: none; background-color: red; color: white; cursor: pointer; padding: 15px; border-radius: 10px; font-size: 18px; } #myBtn:hover { background-color: #555; } <body> <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button> </body>