javascript - 使用循环滚动 divs

Question

我制作了一个单页网站，每个 div 占据了页面的 100%。

目前我有一些代码可以将用户带到页面下方，一次一个 div。

$(".box1").click(function(e){
    $('html, body').animate({scrollTop:$('.box2').offset().top }, 'slow');
});

$(".box2").click(function(e){
    $('html, body').animate({scrollTop:$('.box3').offset().top}, 'slow');
});

$(".box3").click(function(e){
    $('html, body').animate({scrollTop:$('.box4').offset().top}, 'slow');
});

$(".box4").click(function(e){
    $('html, body').animate({scrollTop:$('.box5').offset().top}, 'slow');
});

与其让用户每次点击不同的 div(box1、box2 等)，不如让用户每次都点击同一个 div(.arrow)？

我已经尝试过这个，用户点击 .arrow 来完成循环:

var boxes = ["box1", "box2", "box3", "box4"];

    for (i = 1; i > boxes.length; i++) {
        $(".arrow")click(function(e){
        $('html, body').animate({scrollTop:$(boxes[i]).offset().top}, 'slow');
    });

    }

然而，这是无响应的，根本不会滚动。有谁知道这个循环有什么问题吗？

Answer 1

在 .arrow 上只有一个监听器，它有一些逻辑来决定去哪里

(function enableArrow() {
    var i = 1; // initial box
    $(".arrow").click(function (e) {
        i = i % 5 + 1; // (0 to 4) + 1 => 1 to 5
        $('html, body').animate(
            {scrollTop: $('.box'+i).offset().top},
            'slow'
        );
    });
}());