單擊按鈕時從Div滾動到Div

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/