滾動到下一節/課程

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 。 當我在第一個元素上方滾動時，其工作方式就像是魅力和“重置”。