javascript - 如何延迟点击滚动事件？

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);
});

它会在最后设置的持续时间(在上面的示例中为 3000 毫秒/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

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

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

https://codepen.io/_kram/pen/aXXWNm