滚动触发跳转下一个区块功能失效，jQuery调用offset().top不生效如何解决

问题根因 #

你遇到的滚动异常是多个问题叠加导致的：

• 你最开始的写法scrollTop: '#' + $('.is-current').next().attr('id')本身就是错误的，scrollTop参数只接受像素数值，不支持传入DOM选择器字符串
• 更换offset().top后依然失效的核心原因是滚动事件死循环：你给window绑定的scroll事件回调里执行了animate滚动操作，而animate滚动页面的过程会持续触发scroll事件，导致动画被反复中断、无限触发，根本无法正常执行完成
• 额外影响因素：
  1. 你的HTML里的.scroll-block没有设置高度，默认高度为0，页面本身就没有滚动空间
  2. 当前区块是最后一个区块时，调用next().offset().top会因为获取不到元素直接抛出JS错误，导致后续逻辑中断
  3. 没有做滚动方向判断，不管用户向上/向下滚动都会强制跳转到下一个区块，逻辑不符合交互预期

修复方案 #

首先给区块添加基础样式保证可滚动：

.scroll-block {
  min-height: 100vh;
  width: 100%;
}
/* 可添加不同背景色方便区分区块
#block1 {background: #f1f1f1;}
#block2 {background: #e2e2e2;}
#block3 {background: #d3d3d3;}
#block4 {background: #c4c4c4;}
*/

修复后的完整代码：

$('.scroll-block:first').addClass('is-current');
// 动画锁，避免滚动事件死循环
let isAnimating = false;
// 记录上一次滚动位置，判断滚动方向
let lastScrollTop = $(window).scrollTop();

// 简化mouseover逻辑
$(window).on('mouseover', function(event) {
  const $targetBlock = $(event.target).parents('.scroll-block:first');
  if ($targetBlock.length) {
    $('.scroll-block').removeClass('is-current');
    $targetBlock.addClass('is-current');
  }
});

$(window).on('scroll', function() {
  // 动画执行中直接跳过，避免重复触发
  if (isAnimating) return;
  
  const currentScrollTop = $(window).scrollTop();
  // 只响应向下滚动的操作，如需支持向上滚动可自行扩展逻辑
  if (currentScrollTop <= lastScrollTop) {
    lastScrollTop = currentScrollTop;
    return;
  }
  lastScrollTop = currentScrollTop;

  const $current = $('.is-current');
  const $next = $current.next('.scroll-block');
  // 没有下一个区块直接返回
  if (!$next.length) return;

  // 加锁，执行动画
  isAnimating = true;
  // 同时指定html、body作为滚动载体，兼容不同浏览器差异
  $('html, body').animate({
    scrollTop: $next.offset().top
  }, 800, function() {
    // 动画完成后更新当前区块、解锁
    $current.removeClass('is-current');
    $next.addClass('is-current');
    isAnimating = false;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="scroll-block container" id="block1"></div>
<div class="scroll-block container" id="block2"></div>
<div class="scroll-block container" id="block3"></div>
<div class="scroll-block container" id="block4"></div>

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