CODEWITHSUNDEEP
javascript
Behar
Behar

Reputation: 179

Back to Top button with JS

Have made a button when you click it then it sends you at the top of page,but there's a problem with it. I need button Back to Top to appear when the page is scrolled like 100px and if it goes below 100px to dissapear, have tried from my examples but didn't worked.

function animateToTop(e) {
  e.preventDefault();
  
  let scrollToTop = window.setInterval(function() {
    let pos = window.pageYOffset;
    
    if (pos > 0 && pageYOffset >= 10) {
      window.scrollTo(0, pos - 20);
      document.querySelector('.scrolimg').style.visibility = 'visible';
    } else {
      window.clearInterval(scrollToTop);
      document.querySelector('.scrolimg').style.visibility = 'visible';
    }
  }, 9);
}
.scrolimg {
  width: 88px;
  height: 79px;
}

.scroll {
  width: 100px;
  height: 80px;
  position: sticky;
  top: 640px;
  left: 1350px;
  transition: 0.2s;
  z-index: 99;
}

.scroll:hover {
  transform: scale(1.2)
}

body {
  height: 1400px;
  background: yellowgreen;
  margin: 0;
  padding: 0;
}

.bg1 {
  height: 650px;
  background: red;
}
<div class="bg1"></div>
<div class="scroll">
  <img onclick="animateToTop(event)" class="scrolimg" src="https://www.freeiconspng.com/uploads/arrow-icon-clip-art-file-down-arrow-icon-png-balin-icon-arrow-right--32.png">
</div>

Upvotes: 2

Views: 1315

Answers (2)

marcXandre
marcXandre

Reputation: 2432

Change animateToTop to this and add scroll-behavior: smooth;. It should do the work:

function animateToTop(e) {
    window.scrollTo(0, 0);
}

window.addEventListener('scroll', (e) => {
    var scrollTopBtn = document.getElementsByClassName('scrolimg')[0];
    if (window.scrollY >= 100) {
        scrollTopBtn.style.visibility = 'visible';
    } else {
        scrollTopBtn.style.visibility = 'hidden';
    }
});

html {
    scroll-behavior: smooth;
}

You can also use:

document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;

But there's no more animation

Upvotes: 1

Maheer Ali
Maheer Ali

Reputation: 36564

Added an event listener for scroll which will check if the the current topScroll and change style.display of .scroll accordingly. I also changed a bit in css postion:fixed bottom:0px right:0px

document.addEventListener('scroll',(e)=>{
  
  let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  if(scrollTop > 100) document.querySelector('.scroll').style.display = "block";
  else document.querySelector('.scroll').style.display = "none"
})
function animateToTop(e) {
    e.preventDefault();
    let scrollToTop = window.setInterval(function() {
        let pos = window.pageYOffset;
        if ( pos > 0 && pageYOffset >= 10) {
            window.scrollTo(0, pos - 20);
            document.querySelector('.scrolimg').style.visibility = 'visible';
        } else {
            window.clearInterval(scrollToTop);
            document.querySelector('.scrolimg').style.visibility = 'visible';
        }
    }, 
    9
    )
}
.scrolimg{
  width: 88px;
  height: 79px;
}
.scroll{
  width: 100px;
  height: 80px;
  transition: 0.2s;
  z-index: 99;
  position:fixed;
  bottom:0px;
  right:0px;
  
}
.scroll:hover{
  transform: scale(1.2)
  
}
body{
  height: 1200px;
  background: yellowgreen;
  margin: 0;
  padding: 0;
}
.bg1{
  height: 450px;
    background: red;
}
<div class="bg1"></div>         
<div class="scroll">
           <img onclick="animateToTop(event)" class="scrolimg" src="https://www.freeiconspng.com/uploads/arrow-icon-clip-art-file-down-arrow-icon-png-balin-icon-arrow-right--32.png">
         </div>

Upvotes: 3

Related Questions