jQuery实现下一篇滚动功能 同class元素不连续时失效问题

代码失效是因为jQuery DOM遍历方法使用错误：

• next(selector) 仅匹配紧邻的下一个同级元素，只要两个.new元素中间插入了其他节点，该方法就会返回空，导致逻辑失效
• 你写的第二版实现里$('.new').next('.p')选择器目标错误，本身就无法匹配到.new类的帖子元素。

不要基于相邻节点关系做遍历，直接一次性获取所有.new类元素的集合，通过索引定位目标元素即可，这种方案完全不受.new元素之间插入其他内容的影响。
修复后的完整代码：

<script>
// 页面加载完成后缓存所有.new类帖子，避免每次点击重复查询DOM
const $postList = $(".new");
// 记录当前展示的帖子索引，初始定位到第一篇（索引值为0）
let currentPostIndex = 0;

$("#down").on("click", function () {
    // 索引自增，到最后一篇后自动回到第一篇，实现循环切换
    currentPostIndex = (currentPostIndex + 1) % $postList.length;
    const $targetPost = $postList.eq(currentPostIndex);

    // 执行滚动
    $('html, body').stop(true).animate({
        scrollTop: $targetPost.offset().top - $('.sticky').height()
    }, 300); // 原代码写0是无动画瞬跳，可根据需要调整动画时长

    // 如果需要保留active高亮逻辑，放开下面两行注释即可
    // $postList.removeClass('active');
    // $targetPost.addClass('active');

    return false;
});
</script>

• 不依赖元素的相邻位置关系，无论.new元素之间插入多少其他DOM节点，定位都不会出错
• 提前缓存DOM集合，比每次点击重新查询DOM性能更好
• 用取模运算实现循环切换，逻辑比判断元素是否存在更简洁，边界处理更稳妥
• 原代码里减去吸顶.sticky元素高度的逻辑完全保留，不会破坏原有布局适配

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