单击按钮时从一个Div滚动到另一个Div

我有4个部分，和一个nextButton，用于滚动。我希望每次点击该按钮时，页面都会滚动，最靠近顶部的部分也会滚动到顶部，这样每次点击时，我都能以合理的方式获得从第一部分到最后一部分的滚动序列。

首先，我用"下一个"概念制作了它，从第1节到第n节，但它很糟糕。事实上，如果你用鼠标或手指滚动到底部，然后第一次点击nextButton按钮，页面就会回到第一部分。

不!我不想那样。

所以我尝试了这种新的逻辑方法，它需要不止一个If—Else If循环。但是它不工作:

var $output = $('.output');
$(window).on('scroll', function () {
    var scrollTop = $(window).scrollTop(),
        sec1Offset = $('#sec1').offset().top,
        sec2Offset = $('#sec2').offset().top,
        sec3Offset = $('#sec3').offset().top,
        sec4Offset = $('#sec4').offset().top,
        d1 = (sec1Offset - scrollTop),
        d2 = (sec2Offset - scrollTop),
        d3 = (sec3Offset - scrollTop),
        d4 = (sec4Offset - scrollTop);
    $output.html(d1 + " " + d2 + " " + d3 + " " + d4);
});
var scrollTop = $(window).scrollTop(),
    sec1Offset = $('#sec1').offset().top,
    sec2Offset = $('#sec2').offset().top,
    sec3Offset = $('#sec3').offset().top,
    sec4Offset = $('#sec4').offset().top,
    d1 = (sec1Offset - scrollTop),
    d2 = (sec2Offset - scrollTop),
    d3 = (sec3Offset - scrollTop),
    d4 = (sec4Offset - scrollTop),
    aa = (('d1' > 0)),
    bb = (('d1' <= 0) && ('d2' > 0)),
    cc = (('d1' < 0) && ('d2' <= 0) && ('d3' > 0)),
    dd = (('d1' < 0) && ('d2' < 0) && ('d3' <= 0) && ('d4' > 0));
$('#next-btn').click(function () {
    if ('aa') {
        $('html, body').animate({
            scrollTop: $('#sec1').offset().top
        }, 1300);
        return false;
    } else if ('bb') {
        $('html, body').animate({
            scrollTop: $('#sec2').offset().top
        }, 1300);
        return false;
    } else if ('cc') {
        $('html, body').animate({
            scrollTop: $('#sec3').offset().top
        }, 1300);
        return false;
    } else if ('dd') {
        $('html, body').animate({
            scrollTop: $('#sec4').offset().top
        }, 1300);
        return false;
    }
});

我把链接留给JsFiddle!

TNX !