如何使滚动到顶部按钮的动画流畅 [英] How to make my scroll to top button animate smoothly

问题描述

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

I have a scroll to top button on my page, but when I click it, it doesnt scroll to top, it just takes me directly to the top, like as if I loaded a new page, but what I need is the scrolling animation.

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>

推荐答案

您的 topFunction()跳转到页面顶部.您真正想要的是多次跳转，例如上升20像素.并且，为了使其不会太快发生，请添加超时.我更改了您的代码以创建一个有效的示例.

Your topFunction() makes a jump to the top of the page. What you actually want is multiple jumps, e.g., going up 20px. And, for it to not occur too fast, add a timeout. I altered your code to make a working example.

尽管我建议使用容器div而不是检查(document.body.scrollTop>步骤|| document.documentElement.scrollTop>步骤).设置元素并使用 element.scrollTop 会更干净(对于不同的浏览器更安全).

Although I would recommend operating with the container div instead of checking for (document.body.scrollTop > step || document.documentElement.scrollTop > step). Setting the element and working with element.scrollTop would be cleaner ( and safer for different browsers ) .

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>

这篇关于如何使滚动到顶部按钮的动画流畅的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！