使用jQuery滚动到Next DIV [英] Scroll to Next DIV using jQuery

问题描述

我有这样的页面模板：

<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-btnhref =＃ >单击< / a> ，我希望它滚动到最后< div class =container> （最后一行）在代码片段中。

When <a class="control-btn" href="#"> </a> is clicked, I want it to scroll to the last <div class="container"> (the last line in the code snippet).

使用此jQuery，它会滚动到第一个 div.container （朝向顶部） of the snippet）：

With this jQuery, it scrolls to the first div.container (toward the top of the snippet):

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

如何让它滚动到下一个 div.container （我的代码示例中的最后一个）？

How can I get it to scroll to the next div.container (the last one in my code example)?

注意：还有其他 div。容器元素向下 - 这不是页面上的最后一个。

Note: There are other div.container elements further down -- this isn't the "last" one on the page.

推荐答案

$('.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;
});

DEMO

DEMO

这篇关于使用jQuery滚动到Next DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！