This is how I include the button in the body:
<?php require_once('scrollToTop.php'); ?>
This is my scroll tTo Top.php file:
<div class="btnScrollToTop" data-scroll="up" type="button">
<img src="images/paudie_scroll_top_icon.jpg" alt="">
This is the CSS for the button:
.btnScrollToTop {
position: fixed;
right: 20px;
bottom: 20px;
width: 50px;
width: 50px;
border: none;
z-index: 99;
}
This is my js file included in php footer as:
<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"
});
});
I am unable after a variety of attempts to get he button to appear only one the use has scroll 20px from the top of page.
Please help.
To do what you require you can retrieve the current window scroll position, check if it's higher than 20 and use it to toggle the display state of the button:
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");
}
});