JQuery: нажмите, чтобы перейти к следующему разделу

Question

У меня есть функция, созданная в результате чего при нажатии .section-down-arrow-wrap будет проходить до предков и найти ближайший .fullscreen элемент, идея при нажатии этого будет прокручивать .section элемент вниз к следующий экземпляр .fullscreen, как вы можете видеть, если эта скрипка: https://jsfiddle.net/neal_fletcher/d9zbw1k2/ не работает должным образом, некоторые прокручивают вас до следующего, некоторые - нет, некоторые прокручивают вас вверх. Мне нужен метод, который найдет fullscreen дальше по дереву, так как он не всегда будет элементом бабушки и дедушки section-down-arrow-wrap. Вот разметка:

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); 

    }); 

}); 

Любые предложения будут высоко оценены!

Answer 1

Вы должны включать текущую вертикальную позицию прокрутки в вашем расчете .scrollTop()

$('.scroller').click(function(){ 
    var fuller = $(this).closest('.fullscreen').next(), 
     section = $(this).closest('.section'); 

    section.animate({ 
     scrollTop: section.scrollTop() + fuller.offset().top 
    }, 700); 
}); 

JSFiddle

Answer 2

$(document).ready(function(){ 
    $("#button").click(function() { 
     $('html, body').animate({ 
      scrollTop: $("#scroll").offset().top 
     }, 1000); 
    }); 
}); 

кнопка является идентификатор, где нажать на

улиткой, где дрейфует к

Answer 3

Вам нужно сделать $(section).scrollTop() + fuller.offset().top для этого.

$(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: $(section).scrollTop() + fuller.offset().top + 0 
 
     }, 700); 
 
    }); 
 
});

.section { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    overflow: scroll; 
 
} 
 
.fullscreen { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 400px; 
 
    background: orange; 
 
} 
 
.fullscreen:nth-child(even) { 
 
    background: blue; 
 
} 
 
.section-down-arrow-wrap { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<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>