JQuery: click to go to the next section.

Question

I have a function with which, when I click on a button, .section-down-arrow-wrapit will navigate through the ancestors and find the nearest element .fullscreen, the idea is when you click on it, it scrolls the element .sectionto the next instance .fullscreen, as you can see if this fiddle: https: //jsfiddle.net/neal_fletcher/d9zbw1k2/ , it does not work properly, some scroll you to the next one, some do not, some scroll you up. I need a method that will find fullscreenfurther down the tree, since it will not always be a grandparent element section-down-arrow-wrap. Here's the 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 would be greatly appreciated!

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

$(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>

Hide result

Answer 3

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

Button

is the identifier where to click

scrolling is where scrolling to