如何延迟点击滚动事件？

Question

这是我想要实现的目标：

1. 单击英雄容器底部的向下箭头。
2. 发生了关键帧动画。 （具体来说，使div上的内容淡出，并且背景更改颜色以匹配下面的div的背景。）
3. 动画制作完成后，立即滚动到下面的div，之后其内容将淡入。

我对CSS，HTML和JS完全陌生，但是已经成功完成了步骤1和步骤2。

要尝试实现第3步，我使用在https://stackoverflow.com/a/6677069处找到的以下代码：

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

它将为最后设置的持续时间（在上面的示例中为3000ms / 3秒）创建平滑的滚动。

在这里起作用：

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

#stuff {
 text-align: center;
  height: 30vh;
  margin: 20vh 0;
  font-size: 5rem; 
  
}



#top {
cursor: pointer;
  text-align: center;
  height: 1vh;
  font-size: 5rem;
}

#star {
  text-align: center;
  font-size: 100px;
  line-height: 500px;
  color: #ddd;
  height: 100vh;
}

#bottom {
  text-align: center;
  font-size: 100px;
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="stuff"> 
Click arrow to scroll down</div>
<div id="top">˅</div>

<div id="star">&star;</div>

<div id="bottom">This is the bottom</div>

我想要修改此代码或使用新的代码，这些代码将在点击发生后经过一定的秒数跳到div（而不是平滑滚动）。

请帮助。

Answer 1

您可以在.animate()函数之前添加延迟函数，这会将动画延迟3秒。

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

.delay()