Question

在单击按钮时创建了一个按钮，然后将其发送到页面顶部，但是它存在问题。当页面以100px的速度滚动浏览时，如果要消失到100px以下，我需要按钮Back to Top才能显示，请尝试用我的示例，但没有用。

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>

Answer 1

为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>

Answer 2

将animateToTop更改为此并添加scroll-behavior: smooth;。它应该做的工作：

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

您还可以使用：

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

但是没有更多的动画了

使用JS返回页首按钮

2 个答案: