JS实现NEXT/PREVIOUS锚点滚动至新更新答案失效问题排查

看起来你的核心问题大概率出在隐藏元素的偏移量获取以及初始状态的选中逻辑缺失上，咱们一步步拆解：

1. 隐藏元素无法获取offset()值 #

你标记新/更新答案的<label>是display:none状态的，而jQuery的offset()方法对于完全隐藏（display:none）的元素会返回null——因为这类元素不会占据页面布局空间，自然没有有效的坐标值。这就导致你的if (target.offset())判断不成立，滚动动画根本没执行。

修复思路： #

要么把这些标记元素改成不影响布局但可见性为隐藏的样式，比如：

.new {
  position: absolute;
  visibility: hidden;
  height: 0;
  width: 0;
}

这样元素仍在文档流中保留布局位置（虽然不可见），offset()就能正常获取到它的top值。

或者，如果你不想修改标记元素的样式，可以把滚动目标改成该标记元素对应的答案容器——比如假设每个new_@i标签都紧邻着对应的答案区块，那可以用target.next()或者target.closest('.answer-container')来获取实际需要滚动到的可见元素。

2. 初始状态缺少currentSelected类 #

第一次点击按钮时，$(".new.currentSelected")找不到任何元素，anchors.index(selected)会返回-1，此时anchors.get(pos+1)虽然能拿到第一个新答案，但后续的索引计算可能因为初始状态混乱出问题。

修复思路： #

在页面加载完成后，给第一个.new元素添加currentSelected类：

$(document).ready(function() {
  $(".new:first").addClass("currentSelected");
});

3. 优化后的完整JS代码 #

结合上面的修复，调整后的代码大概是这样：

$(document).ready(function() {
  // 初始化选中第一个新答案标记
  $(".new:first").addClass("currentSelected");

  $('#nextnew').click(function(e) {
    var selected = $(".new.currentSelected");
    var anchors = $(".new");
    var pos = anchors.index(selected);
    // 处理边界：如果已经是最后一个，可选择回到第一个（按需调整）
    var nextIndex = (pos + 1) >= anchors.length ? 0 : pos + 1;
    var next = anchors.get(nextIndex);
    
    $(selected).removeClass("currentSelected");
    $(next).addClass("currentSelected");
    
    var target = $(next);
    // 如果用的是修改样式后的标记，直接取offset
    if (target.offset()) {
      $('html, body').animate({
        scrollTop: target.offset().top
      }, 600);
    }
    // 若选择滚动到对应答案容器，替换成下面的代码：
    // var answerContainer = target.closest('.answer-block');
    // if (answerContainer.length) {
    //   $('html, body').animate({
    //     scrollTop: answerContainer.offset().top
    //   }, 600);
    // }
    e.preventDefault();
  });
});

另外，别忘了确认你的jQuery代码是在DOM加载完成后执行的——如果JS写在<head>里，一定要包裹在$(document).ready()中，否则元素还没渲染出来，事件绑定会失效。

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