如何在jQuery点击函数中添加延迟后执行滚动动画？

嘿，我来帮你搞定这个滚动延迟的问题～你之前用.delay()没生效，是因为这个方法默认只对jQuery的**动画队列（fx队列）**里的操作起效，而你原来的写法没把延迟和滚动动画绑定到同一个队列中。下面给你两种可行的解决方案：

方案1：用原生setTimeout（逻辑更直观，推荐） #

直接用setTimeout把滚动动画的代码包起来，就能精准控制延迟时间：

$(".o-c").click(function(e) {
  // 阻止链接默认的锚点跳转行为，避免覆盖动画
  e.preventDefault();
  // 延迟5000毫秒（也就是5秒）后执行滚动动画
  setTimeout(() => {
    $('html, body').animate({ scrollTop: $(".one").offset().top }, 2000);
  }, 5000);
});

方案2：正确使用jQuery的.delay() #

如果你更想用jQuery的方法，只要把延迟和动画链式调用在同一个元素上就行，因为.delay()只对后续的队列操作生效：

$(".o-c").click(function(e) {
  e.preventDefault();
  // 先延迟5秒，再执行滚动动画
  $('html, body').delay(5000).animate({ scrollTop: $(".one").offset().top }, 2000);
});

重要提醒： #

不管用哪种方案，都要加上e.preventDefault()或者return false，因为你的链接有href="#one"，浏览器默认会直接跳转到锚点位置，会直接打断你的滚动动画哦。

你的HTML和CSS代码不需要改动，只替换JavaScript部分就可以啦～

内容的提问来源于stack exchange，提问作者user38208