在单个页面上的部分之间滚动动画？ （仅限javascript）

Question

我在这里发现了一些类似于我所问的帖子，但它们都涉及jQuery（我正在寻找一个纯粹的javascript解决方案，就像可能的）。

我的页面左侧有一个固定的导航页面，不同的链接会将您向上或向下移动到页面上的不同部分。它工作正常，但我试图找到一种方法来动画滚动。我设法提出了一些javascript告诉我各部分之间的偏移：

function scroll(e) {
   dest = e.target.getAttribute('href'); 

（例如，这会给我#aboutCon的结果）

   destination = dest.replace("#", "");

（这改为aboutCon，已经定义为包含＆＃34;关于＆＃34;部分的变量）

   var destOffset = window[destination].offsetTop;
   window.scrollTo(0, destOffset); 
}

但我不知道如何获取该信息并为其制作动画。我找到了一些javascript解决方案，但它们非常复杂，每当我尝试将它们应用到我自己的代码中时，它们都无法正常工作。我希望有一个简单的方法来实现这个目标吗？

我是一名学生并仍在学习，如果您有答案，我将非常感谢随附的解释！谢谢！

Answer 1

document.getElementById("elementID").scrollIntoView();

或清理一下......

function scrollIntoView(eleID) { 
   var e = document.getElementById(eleID); 
   if (!!e && e.scrollIntoView) {
       e.scrollIntoView();
   }
}

当然，将“elementID”替换为要滚动到的div或元素的ID。

这是我用纯JS找到的最简单的解决方案。