Así es como incluyo el botón en el cuerpo:
<?php require_once('scrollToTop.php'); ?>Este es mi archivo scroll tTo Top.php:
<div class="btnScrollToTop" data-scroll="up" type="button"> <img src="images/paudie_scroll_top_icon.jpg" alt="">Este es el CSS para el botón:
.btnScrollToTop { position: fixed; right: 20px; bottom: 20px; width: 50px; width: 50px; border: none; z-index: 99; }Este es mi archivo js incluido en el pie de página de php como:
<script src="js/scroll.js"></script> // JavaScript Document const btnScrollToTop = document.querySelector(".btnScrollToTop"); btnScrollToTop.addEventListener("click", function() { window.scrollTo({ top: 0, left: 0, behavior: "smooth" }); });Después de una variedad de intentos, no puedo hacer que el botón aparezca solo uno, el uso tiene un desplazamiento de 20 píxeles desde la parte superior de la página.
Por favor ayuda.
Para hacer lo que necesita, puede recuperar la posición de desplazamiento de la ventana actual, verificar si es superior a 20 y usarla para alternar el estado de display del botón:
const btnScrollToTop = document.querySelector(".btnScrollToTop"); // scroll to top of page when button clicked btnScrollToTop.addEventListener("click", e => { window.scrollTo({ top: 0, left: 0, behavior: "smooth" }); }); // toggle 'scroll to top' based on scroll position window.addEventListener('scroll', e => { btnScrollToTop.style.display = window.scrollY > 20 ? 'block' : 'none'; }); h3 { margin: 0 0 1000px; } .btnScrollToTop { position: fixed; right: 20px; bottom: 20px; width: 50px; border: none; z-index: 99; display: none; } <h3>Scroll down...</h3> <div class="btnScrollToTop" data-scroll="up" type="button"> <img src="images/paudie_scroll_top_icon.jpg" alt="Scroll to top" /> </div>CSS:
.btnScrollToTop { position: fixed; right: 20px; bottom: 20px; width: 50px; width: 50px; border: none; z-index: 99; opacity: 0; } .btnScrollToTop.active{ opacity: 1; }JavaScript:
const btnScrollToTop = document.querySelector(".btnScrollToTop"); btnScrollToTop.addEventListener("click", function() { window.scrollTo({ top: 0, left: 0, behavior: "smooth" }); }); window.addEventListener("scroll", () => { if (window.pageYOffset > 100) { btnScrollToTop.classList.add("active"); } else { btnScrollToTop.classList.remove("active"); } });