Javascript 单击按钮时从Div滚动到Div

我有4个部分和一个下一个按钮，用于滚动。我希望每次单击按钮时，页面滚动，最靠近顶部的部分滚动到顶部，这样每次单击时，我都能以合理的方式从第一部分滚动到最后一部分

首先，我提出了下一个概念，从第1节到第N节，但它是可怕的。事实上，如果您用鼠标或手指滚动到底部，然后第一次单击下一个按钮，页面会返回到第一个部分

不！我不想那样

所以我尝试了这种新的逻辑方法，它需要不止一个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;
    }
});

我把链接留给你

---

TNX

第一次单击问题所面临的问题是，您将变量包装为字符串

aa = (('d1' > 0)),
bb = (('d1' <= 0) && ('d2' > 0)),
cc = (('d1' < 0) && ('d2' <= 0) && ('d3' > 0)),
dd = (('d1' < 0) && ('d2' < 0) && ('d3' <= 0) && ('d4' > 0));

在这两种情况下，都是对字符串进行条件检查。如果你删除引号，它就会工作

它第一次起作用的原因是“aa”每次都会评估为真

希望这有帮助

---

有一个名为Waypoints.js的插件可以帮上忙。谢谢，我会看一看。不管怎样，我不明白为什么它在第一次点击时就可以工作，但它停止了工作。这是一个启用按钮的问题吗？或者返回false/return true语义？中的某些内容，因为变量包含在字符串中。这里有一个更新的提琴：用一种黑客的方式设置你的变量SOMG！你让我开心！你知道，我是新手。这是一个完美的新手错误。非常感谢，没问题！作为一个新手，你做得很好！享受学习JavaScript的乐趣！：

if ('aa') {
    $('html, body').animate({
        scrollTop: $('#sec1').offset().top
    }, 1300);
    return false;
}
...