Javascript 单页站点上的平滑滚动动画

我是新的编码，但我能够编码一个网站，是不是太复杂，没有后端。但是有些事情我不知道怎么做，我找不到关于它的教程。

---

所有单页网站都有此功能。当你点击导航栏上的a标签时，会产生平滑的滚动效果。你能给我一个教程或者告诉我是怎么做的吗？

使用scrollIntoView，将行为设置为smooth会产生平滑滚动效果：

document.getElementById（'scrolldiv'）.scrollIntoView（{behavior:'smooth'}）

.box红色{
显示：块；
高度：200px；
宽度：100%；
背景色：红色；
}
.蓝色盒子{
显示：块；
高度：200px；
宽度：100%；
背景颜色：蓝色；
}

顶部
滚动此处

以下是教程：

---

我不确定你是不是在看这个。

天哪，这次这么简单吗？非常感谢你！！但是在第一个版本中，我不明白如何让按钮滚动到一个特定的点。在第一个示例中，你可以使用我编写的一行javascript，将其包装到一个函数中，然后在所需按钮上的onclick内调用它。像这样吗

constbuttonx=document.querySelector（'.button'）；函数scroll（scrolldiv）{document.getElementById（'scrolldiv'）.scrollIntoView（{behavior:'smooth'}）}按钮nx.addEventListener（'click'，（）=>{scroll（about section）；}）

做得很好。你快到了。在函数中，使用参数scrolldiv，但不调用它。您可以通过删除

document.getElementById（'scrolldiv'）

->

document.getElementById（scrolldiv）

中的引号来完成此操作。我还看到您正在使用事件侦听器。这是可行的，但当使用queryselector时，可能会返回多个结果。我建议使用这样的方法：

示例

我现在会在我的答案中添加一个编辑@HHH@HHH正如我在编辑中提到的，您将无法使用函数名

scroll（）

，因为javascript中已经存在这个函数名。使用类似于

scrollToElement（）

的东西。可能重复欢迎使用堆栈溢出，您可以在这里找到帮助程序员的帮助，因此您应该展示您尝试过的代码，如果您正在寻找教程，在这个网站上进行一点研究就足够了