javascript - jQuery: click to scroll to next section -

i have function set whereby when click .section-down-arrow-wrap traverse ancestors , find closest .fullscreen element, idea when click scroll .section element down next instance of .fullscreen can see if fiddle though: https://jsfiddle.net/neal_fletcher/d9zbw1k2/ isn't working expected, scroll next one, don't, scroll upwards. need method that'll find fullscreen further tree won't grandparent element of section-down-arrow-wrap. here's markup:

html:

<div class="section">     <div class="fullscreen"> <span>         <div class="section-down-arrow-wrap scroller">click</div>     </span>      </div>     <div class="fullscreen">         <div class="half-screen">             <div class="section-down-arrow-wrap scroller">click</div>         </div>     </div>     <div class="fullscreen"> <span>         <div class="section-down-arrow-wrap scroller">click</div>     </span>      </div>     <div class="fullscreen">         <div class="half-screen">             <div class="section-down-arrow-wrap scroller">click</div>         </div>     </div> </div> 

jquery:

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

any suggestions appreciated!

you have include current vertical position of scroll in calculation .scrolltop()

$('.scroller').click(function(){     var fuller = $(this).closest('.fullscreen').next(),         section = $(this).closest('.section');      section.animate({         scrolltop: section.scrolltop() + fuller.offset().top     }, 700); }); 

jsfiddle