How to make scroll to top button appear after scrolling

user_16713489 0
Viewed 1008

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.

css jquery javascript
2 Answers

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>

user_5194130

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