Question

我的页面上有一个滚动到顶部按钮，但当我点击它时，它不会滚动到顶部，它只是直接将我带到顶部，就像我加载了一个新页面，但我需要的是滚动动画。

的javascript

window.onscroll = function() {
  scrollFunction()
};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("myBtn").style.display = "block";
  } else {
    document.getElementById("myBtn").style.display = "none";
  }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}

CSS

#myBtn {
  display: none;
  position: fixed;
  bottom: 50px;
  right: 20px;
  z-index: 99;
  border: teal;
  outline: none;
  background-color: #FF6347;
  color: white;
  cursor: pointer;
  padding: 0px;
  border-radius: 100px;
  width: 40px;
  height: 40px;
}

#myBtn i {
  width: 40px;
  height: 40px;
  text-align: center;
  z-index: 100;
  line-height: 40px;
  color: white;
}

#myBtn:hover {
  background-color: #FF6320;
}

HTML

<button1 onclick="topFunction()" id="myBtn" title="Go to top"><i class="fa fa-angle-double-up" aria-hidden="true"></i></button1>

Answer 1

您的topFunction()跳转到页面顶部。你真正想要的是多次跳跃，例如，上升20px。并且，为了不会发生太快，请添加超时。我修改了你的代码以制作一个有效的例子。

虽然我建议使用容器div而不是检查(document.body.scrollTop > step || document.documentElement.scrollTop > step)。设置元素并使用element.scrollTop将更清晰（对于不同的浏览器更安全）。

var step = 20;

window.onscroll = function() {
  scrollFunction()
};

function scrollFunction() {
    if (document.body.scrollTop > step || document.documentElement.scrollTop > step)
    document.getElementById("myBtn").style.display = "block"
  else
    document.getElementById("myBtn").style.display = "none"

}

function topFunction() {
  if (document.body.scrollTop > step || document.documentElement.scrollTop > step) {
    document.body.scrollTop -= step
    document.documentElement.scrollTop -= step
    setTimeout(function() {
      topFunction()
    }, step)
  } else {
    document.body.scrollTop = 0
    document.documentElement.scrollTop = 0
  }
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 50px;
  right: 20px;
  z-index: 99;
  border: teal;
  outline: none;
  background-color: #FF6347;
  color: white;
  cursor: pointer;
  padding: 0px;
  border-radius: 100px;
  width: 40px;
  height: 40px;
}

#myBtn i {
  width: 40px;
  height: 40px;
  text-align: center;
  z-index: 100;
  line-height: 40px;
  color: white;
}

#myBtn:hover {
  background-color: #FF6320;
}

<div style="width:100px;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  <button onclick="topFunction()" id="myBtn" title="Go to top"><i class="fa fa-angle-double-up" aria-hidden="true"></i></button>
</div>

如何使我的滚动到顶部按钮动画顺利

1 个答案: