jQuery: click to scroll to next section

Question

I have a function set up whereby when you click .section-down-arrow-wrap it will traverse up the ancestors and find the closest .fullscreen element, the idea is when you click this it will scroll the .section element down to the next instance of .fullscreen as you can see if this fiddle though: https://jsfiddle.net/neal_fletcher/d9zbw1k2/ 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 fullscreen further up the tree as it won't always be the grandparent element of 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

You have to include the current vertical position of the scroll in your 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

Answer 2

You need to do $(section).scrollTop() + fuller.offset().top for this.

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

Answer 3

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

button is a id where to click on

scroll is where is is scrolling to