滚动到下一节/类问题

Question

我正在尝试根据视口滚动到页面上的下一部分。我不想跟踪每个元素以及它们是否被访问过，因为如果用户决定再次向上滚动，它应该滚动到下一部分。因此，我想出了这个解决方案：

https://jsfiddle.net/w28tfnm9/

$("#scroll-down").on("click", function() {
    $(".section").each(function() {
        var isInViewPort = $(this).isInViewport();
        if (isInViewPort) {
            $("html, body").animate({
                scrollTop: $(this).next().offset().top
            }, 500);
            return false;
        }
    });
});

但是，我有一个小问题：它不会滚动到第一个元素。这是有道理的，因为我检查当前元素是否在视口中，然后滚动到.next()元素，但我无法弄清楚如何解决这个问题，而不会弄乱我已经拥有的东西。有没有更好的方法？

与其说.next()，我基本上希望它进入下一个.section元素。由于不能保证.next()元素是一个部分，因此这不是一个"好"的解决方案。

Answer 1

所以我最终得到了一个黑客：

https://jsfiddle.net/w28tfnm9/3/

$(window).on("scroll", function() {
    if($("body").scrollTop() < $(".section").offset().top) {
        hasScrolled = false;
    } else {
        hasScrolled = true;
    }
});

我基本上遍历每个元素，如果i === 0则意味着我在顶部，但由于我试图使用 .get() 抓取下一个元素，我需要将当前迭代设置为 -1 .就像一个魅力，当我滚动到第一个元素上方时"重置"。