使用jQuery滚动到下一个DIV

Question

我有一个这样的页面模板：

<div class="page-wrapper">
    <header class="header-5">
        <div class="container">
           content
        </div>
        <div class="background"></div>
    </header>

<section class="content-3">
    <div class="row">
        <div class="col-sm-8 col-sm-offset-2 text-center">
            content
            <a class="control-btn" href="#"> </a>
        </div>
    </div>
    <div class="container">

单击<a class="control-btn" href="#"> </a>时，我希望它滚动到最后一个<div class="container"> (代码片段中的最后一行)。

使用此jQuery，它滚动到第一个div.container (指向代码段的顶部)：

 $('.control-btn').on('click', function() {
        $.scrollTo($(".container"), {
            axis : 'y',
            duration : 500
        });
        return false;
    });

如何让它滚动到next div.container (我的代码示例中的最后一个)？

注意:下面还有其他div.container元素--这不是页面上的“最后一个”元素。

Answer 1

$('.control-btn').on('click', function () {
    var ele = $(this).closest("section").find(".container");
    // this will search within the section
    $("html, body").animate({
         scrollTop: $(ele).offset().top
    }, 100);
    return false;
});

演示