在纯javascript中滚动到顶部动画？无法使用 jQuery答案

【问题标题】：Scroll to top animation in pure javascript? Can't use jQuery在纯javascript中滚动到顶部动画？无法使用 jQuery
【发布时间】：2015-10-25 21:31:12
【问题描述】：

有没有简单的方法来转换这个：

$("html, body").animate({ scrollTop: $(document).height() }, 10000);

进入纯javascript？我需要能够在没有可用 jQuery 的环境中运行 js。有任何想法吗？谢谢。

【问题讨论】：

检查一些答案（不是接受的答案）。 stackoverflow.com/a/4147160/752527
@HanletEscaño 该问题专门使用 jQuery。 OP 没有使用 jQuery。
这需要在 iOS 7 及更低版本上制作动画吗？

标签： javascript jquery

【解决方案1】：

您可以通过在一段时间内逐步更改 scrollTop property 来做到这一点。

var scrollingElement = document.body;
var endScrollPosition = scrollingElement.clientHeight;
var timeInMS = 10000;
var startTime = new Date().getTime();
var endTime = new Date(new Date().getTime() + timeInMS).getTime() - startTime;

// Use requestAnimationFrame to ensure a smooth transition
requestAnimationFrame(function animate() {
  // Determine what percentage of the total time has passed
  var now = new Date().getTime() - startTime;
  var ratio = now / endTime;
  if (ratio > 1) {
    ratio = 1;
  }
  
  scrollingElement.scrollTop = endScrollPosition * ratio;
  if (ratio < 1) {
    requestAnimationFrame(animate);
  }
});

<h1>Padding</h1>
<h1>Padding</h1>
<h1>Padding</h1>
<h1>Padding</h1>
<h1>Padding</h1>
<h1>Padding</h1>
<h1>Padding</h1>
<h1>Padding</h1>
<h1>Padding</h1>
<h1>Padding</h1>
<h1>Padding</h1>
<h1>Padding</h1>
<h1>Padding</h1>
<h1>Padding</h1>
<h1>Padding</h1>
<h1>Padding</h1>

【讨论】：