title: Scroll to Next DIV using jQuery
body: <p>I have a page template like this:</p>
  
  <pre><code>&lt;div class="page-wrapper"&gt;
      &lt;header class="header-5"&gt;
          &lt;div class="container"&gt;
             content
          &lt;/div&gt;
          &lt;div class="background"&gt;&lt;/div&gt;
      &lt;/header&gt;
  
  &lt;section class="content-3"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-8 col-sm-offset-2 text-center"&gt;
              content
              &lt;a class="control-btn" href="#"&gt; &lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="container"&gt;
  </code></pre>
  
  <p>When <code>&lt;a class="control-btn" href="#"&gt; &lt;/a&gt;</code> is clicked, I want it to scroll to the last <code>&lt;div class="container"&gt;</code> (the last line in the code snippet).</p>
  
  <p>With this jQuery, it scrolls to the first <code>div.container</code> (toward the top of the snippet):</p>
  
  <pre><code> $('.control-btn').on('click', function() {
          $.scrollTo($(".container"), {
              axis : 'y',
              duration : 500
          });
          return false;
      });
  </code></pre>
  
  <p>How can I get it to scroll to the <strong>next</strong> <code>div.container</code> (the last one in my code example)?</p>
  
  <p>Note: There are other <code>div.container</code> elements further down -- this isn't the "last" one on the page.</p>