时间戳

首页 > 解决方案 > 带有 JS 的返回顶部按钮

javascript - 带有 JS 的返回顶部按钮

问题描述

当您单击它时已制作了一个按钮，然后它会将您发送到页面顶部，但是它有问题。当页面滚动到 100px 时，我需要按钮 Back to Top 出现，如果它低于 100px 消失，从我的示例中尝试过，但没有奏效。

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>

标签： javascript

解决方案

添加了一个事件监听器scroll，它将检查当前topScroll和相应的变化style.display。.scroll我也改变了一点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>

推荐阅读