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.

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.

• javascript
• jquery
• css

2 Answers 2

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"); 
  } 
});