单击按钮时从Div滚动到Div

Question

I've got 4 sections, and a nextButton, for scrolling. I want that every time I click that button, the page scrolls and the section nearest to the top, scrolls to the top, so that every time I click, I obtain a sequence of scrolling from the first section to the last, in a reasonable way.

Firstly I made it with a "next" concept, from section1 to section"n", but it was awful. In fact, if you scrolled with mouse or fingers to the bottom, than you clicked the nextButton button for the first time, the page came up back to the first section.

No! I don't want it like that.

So I tried this new logic approach, that needs more than one If--Else If cycle. But It doens't work:

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;
    }
});

I leave the link to JsFiddle !

TNX!

Answer 1

The issue you're facing with the "first click" problem is because you've wrapped your variables as a string.

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

and

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

In both, you're doing conditional checks against a string. If you remove the quotes, it'll work.

The reason it worked the first time is because 'aa' will evaluate true every time.

Hope this helps!

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