Question

我有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！

Answer 1

您遇到“首次点击”问题时遇到的问题是因为您已将变量包装为字符串。

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

和

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

在两者中，你都在对字符串进行条件检查。如果您删除引号，它将起作用。

它第一次工作的原因是因为'aa'每次都会评估为真。

希望这有帮助！

http://jsfiddle.net/PxnAw/20/

单击按钮时从Div滚动到Div

1 个答案: