title: jQuery: click to scroll to next section
body: <p>I have a function set up whereby when you click <code>.section-down-arrow-wrap</code> it will traverse up the ancestors and find the closest <code>.fullscreen</code> element, the idea is when you click this it will scroll the <code>.section</code> element down to the next instance of <code>.fullscreen</code> as you can see if this fiddle though: <a href="https://jsfiddle.net/neal_fletcher/d9zbw1k2/" rel="nofollow">https://jsfiddle.net/neal_fletcher/d9zbw1k2/</a> it isn't working as expected, some scroll you to the next one, some don't, some scroll you upwards. I need a method too that'll find <code>fullscreen</code> further up the tree as it won't always be the grandparent element of <code>section-down-arrow-wrap</code>. Here's the markup:<br><br>
  HTML:</p>
  
  <pre><code>&lt;div class="section"&gt;
      &lt;div class="fullscreen"&gt; &lt;span&gt;
          &lt;div class="section-down-arrow-wrap scroller"&gt;CLICK&lt;/div&gt;
      &lt;/span&gt;
  
      &lt;/div&gt;
      &lt;div class="fullscreen"&gt;
          &lt;div class="half-screen"&gt;
              &lt;div class="section-down-arrow-wrap scroller"&gt;CLICK&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="fullscreen"&gt; &lt;span&gt;
          &lt;div class="section-down-arrow-wrap scroller"&gt;CLICK&lt;/div&gt;
      &lt;/span&gt;
  
      &lt;/div&gt;
      &lt;div class="fullscreen"&gt;
          &lt;div class="half-screen"&gt;
              &lt;div class="section-down-arrow-wrap scroller"&gt;CLICK&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery: </p>
  
  <pre><code>$(document).ready(function () {
  
      $('.section-down-arrow-wrap.scroller').on('click', function () {
  
          var fuller = $(this).closest('.fullscreen').next('.fullscreen'),
              section = $(this).closest('.section');
  
          section.animate({
              scrollTop: fuller.offset().top + 0
          }, 700);
  
      });
  
  });
  </code></pre>
  
  <p>Any suggestions would be greatly appreciated!</p>