Javascript 如何延迟单击滚动事件？

以下是我想要实现的目标：

单击英雄容器底部的向下箭头。 使关键帧动画发生。具体来说，使div上的内容淡出，并使背景颜色改变以匹配下面div的背景。 动画完成后，立即滚动到下面的div，之后其内容将淡入。 我对CSS、HTML和JS几乎一无所知，但我已经完成了第1步和第2步

为了尝试实现第3步，我使用了我在中找到的以下代码：

它会创建一个平滑的滚动，持续时间设置在最后，在上面的示例中，持续时间为3000ms/3秒

这就是行动：

$top.clickfunction{ $[document.documentElement，document.body]。动画{ scrollTop:$bottom.offset.top }, 3000; }; 东西{ 文本对齐：居中； 高度：30vh； 保证金：20VH0； 字体大小：5rem； } 顶{ 光标：指针； 文本对齐：居中； 高度：1vh； 字体大小：5rem； } 明星{ 文本对齐：居中； 字体大小：100px； 线高：500px； 颜色：ddd； 高度：100vh； } 底部{ 文本对齐：居中； 字体大小：100px； 颜色：绿色； } 单击箭头向下滚动 ˅ &明星；

---

这是底部您可以在.animate函数之前添加延迟函数，这将使动画延迟3秒

$([document.documentElement, document.body]).delay(3000).animate({
  scrollTop: $("#bottom").offset().top
}, 3000);

---

设置setTimeoutfunction{//do scroll animation}，3000在单击按钮3秒后执行操作。@MrNew这似乎只是将按钮执行任何操作延迟3000毫秒，而不是在按下按钮3000毫秒后执行操作。

$([document.documentElement, document.body]).delay(3000).animate({
  scrollTop: $("#bottom").offset().top
}, 3000);