Javascript jQuery：单击以滚动到下一部分

jQuery: click to scroll to next section

提问by user1374796

I have a function set up whereby when you click .section-down-arrow-wrapit will traverse up the ancestors and find the closest .fullscreenelement, the idea is when you click this it will scroll the .sectionelement down to the next instance of .fullscreenas 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 fullscreenfurther up the tree as it won't always be the grandparent element of section-down-arrow-wrap. Here's the markup:

HTML:

我设置了一个函数，当你点击.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:

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!

任何建议将不胜感激！

采纳答案by Artur Filipiak

You have to include the current vertical position of the scroll in your calculation .scrollTop()

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

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

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

JSFiddle

JSFiddle

回答by RRK

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

你需要为此做些什么$(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>

回答by Remco v1

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

button is a id where to click on

按钮是点击的id

scroll is where is is scrolling to

滚动是滚动到的位置