title: Scrolling to the next element
body: <p>I'm struggling with a jquery or javascript problem.</p>
  
  <p>It already got annoying which tells me I might think too complicated on this one.</p>
  
  <p><strong>So my markup (simplyfied) looks like this:</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
      My Content
  &lt;a href="#" class="button"&gt;scroll down&lt;/a&gt;
  &lt;/div&gt;
  
  
  &lt;div class="container"&gt;
      My Content
  &lt;a href="#" class="button"&gt;scroll down&lt;/a&gt;
  &lt;/div&gt;
  
  
  &lt;div class="container"&gt;
      My Content
  &lt;a href="#" class="button"&gt;scroll down&lt;/a&gt;
  &lt;/div&gt;
  
  
  &lt;div class="container"&gt;
      My Content
  &lt;a href="#" class="button"&gt;scroll down&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Basically just some containers. </p>
  
  <p>Each one contains different content and a button.</p>
  
  <hr>
  
  <p><strong>The Plan:</strong></p>
  
  <p>1) After a click on a button the window should scroll down to the <strong>next container</strong>.</p>
  
  <p>2) The last button <strong>scrolls to the first</strong> container again. So I need a <strong>loop</strong>.</p>
  
  <p>3) The <strong>numbers</strong> of containers may change from page to page. </p>
  
  <p><strong>EDIT:</strong> 4) The containers may not always be direct siblings to each other (see markup below)</p>
  
  <hr>
  
  <p><strong>The Problem:</strong></p>
  
  <p>I could get this to work by giving each container a unique ID as a target for the scroll effect.</p>
  
  <p>The problem with that is that it gets too messy quickly. </p>
  
  <p>Cant I just somehow target "<em>the next object with the class: container</em>", and scroll to that?</p>
  
  <hr>
  
  <p>I'm not sure if js or jquery is the right approach. My knowledge in both is somewhat limited.</p>
  
  <p><strong>I would be really grateful for a push in the right direction.</strong></p>
  
  <hr>
  
  <p><strong>EDIT:</strong> The containers may not always be direct siblings of each other.</p>
  
  <pre><code>&lt;div class="row"&gt;
          &lt;div class="container"&gt;
              My Content
          &lt;a href="#" class="button"&gt;scroll down&lt;/a&gt;
          &lt;/div&gt;
  
  
          &lt;div class="container"&gt;
              My Content
          &lt;a href="#" class="button"&gt;scroll down&lt;/a&gt;
          &lt;/div&gt;
  &lt;/div&gt;        
  
          &lt;div class="container"&gt;
              My Content
          &lt;a href="#" class="button"&gt;scroll down&lt;/a&gt;
          &lt;/div&gt;
  
  
          &lt;div class="container"&gt;
              My Content
          &lt;a href="#" class="button"&gt;scroll down&lt;/a&gt;
          &lt;/div&gt;
  
  &lt;div class="row"&gt;
          &lt;div class="container"&gt;
              My Content
          &lt;a href="#" class="button"&gt;scroll down&lt;/a&gt;
          &lt;/div&gt;
  
  
          &lt;div class="container"&gt;
              My Content
          &lt;a href="#" class="button"&gt;scroll down&lt;/a&gt;
          &lt;/div&gt;
  &lt;/div&gt;  
  </code></pre>