如何实现页面滚动延迟几秒？附现有jQuery代码示例

嘿，这问题很常见，咱们直接用JavaScript的setTimeout()函数就能搞定！它专门用来延迟执行一段代码，正好匹配你的需求。

先拆解下你现有代码的逻辑：点击元素后立刻显示目标区块，紧接着就触发滚动动画。要实现延迟滚动，只需要把滚动相关的代码包裹进setTimeout里，指定你想要的延迟毫秒数就行（比如3000就代表3秒）。

修改后的代码示例 #

$(function(){
  $("#tmp_image-37113").click(function() {
    $('#section--41340').show(150);
    // 这里设置延迟，比如延迟2000毫秒（2秒）后执行滚动
    setTimeout(function() {
      $('html, body').animate({
        scrollTop: $("#section--41340").offset().top
      }, 2000);
    }, 2000); // 这里的数字就是延迟的毫秒数，按需调整
    return false;
  });
});

额外优化建议 #

如果你想要等显示动画完全结束后再开始计时延迟，可以把setTimeout放进show()的回调函数里，这样逻辑更连贯：

$(function(){
  $("#tmp_image-37113").click(function() {
    $('#section--41340').show(150, function() {
      // 等show动画结束后，延迟2秒执行滚动
      setTimeout(function() {
        $('html, body').animate({
          scrollTop: $("#section--41340").offset().top
        }, 2000);
      }, 2000);
    });
    return false;
  });
});

简单来说，setTimeout就是给一段代码加个“定时触发器”：第一个参数是要延迟执行的函数，第二个参数是延迟的时间（以毫秒为单位），你可以根据实际需求随便调整这个数字~

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