javascript – jQuery：点击滚动到下一部分

我有一个功能设置,当你点击.section-down-arrow-wrap时它将遍历祖先并找到最接近的.fullscreen元素,想法是当你点击它时它会将.section元素向下滚动到下一个.fullscreen的实例,你可以看到这个小提琴： https://jsfiddle.net/neal_fletcher/d9zbw1k2/它没有按预期工作,有些滚动到下一个,有些没有,有些向上滚动你.我还需要一种方法,它可以在树上找到全屏,因为它不一定是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);

    });

});

任何建议将不胜感激！

解决方法

您必须在计算 .scrollTop()中包括滚动的当前垂直位置

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

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

JSFiddle