这是我想要实现的目标:
- 点击英雄容器底部的向下箭头。
- 制作关键帧动画。 (具体来说,让 div 上的内容淡出,并让背景改变颜色以匹配下方 div 的背景。)
- 动画完成后,立即滚动到下方的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">☆</div>
<div id="bottom">This is the bottom</div>
我想要的是修改此代码或使用将在点击发生后的设定秒数内跳转到 div(而不是平滑滚动)的新代码。
请帮忙。
最佳答案
您可以添加延迟功能.delay()
在 .animate()
函数之前,这将使动画延迟 3 秒。
$([document.documentElement, document.body]).delay(3000).animate({
scrollTop: $("#bottom").offset().top
}, 3000);
关于javascript - 如何延迟点击滚动事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54756703/