使用动画效果滚动到一个带有ID的div

Question

我知道这个问题可能已经被问过了，但我找不到正确的答案。

我正在尝试使用纯javascript实现一个链接，当您单击它时，可以滚动页面到具有ID的元素，并且我可以控制速度。

我知道以下内容：

document.getElementById('youridhere').scrollIntoView();

但是这并没有起作用，它只是突然出现了。我还试过使用scrollBy，但由于它按增量工作，所以也不起作用。我可以编写代码来检查到元素的剩余距离，如果小于增量，则仅移动剩余部分，但这似乎太笨重了。

我也尝试使用scrollTo，但那也没有什么帮助。

有更简洁的方法吗？

这需要纯JavaScript实现。以下是jQuery等效代码：

var top = target.offset().top;

$('html,body').animate({scrollTop: top}, 1000);

- Ark-of-Ice

Answer 1

没有内置的平滑滚动方式。我会使用setInterval和scrollBy在每次迭代中增加一个增量，然后在完成时使用clearInterval。

您还可以检查jQuery源代码以了解它们如何实现。

- Adam Bergmark