jQuery：点击滚动到下一部分

Question

我有一个功能设置，当你点击.section-down-arrow-wrap它将遍历祖先并找到最接近的.fullscreen元素时，想法是当你点击它时会滚动{{1} }元素向下到.section的下一个实例，因为你可以看到这个小提琴：https://jsfiddle.net/neal_fletcher/d9zbw1k2/它没有按预期工作，有些滚动你到下一个，有些人不在有些人向上滚动你。我还需要一种方法，它会在树上找到.fullscreen，因为它不会永远是fullscreen的祖父元素。这是标记：

HTML：

section-down-arrow-wrap

jQuery：

<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 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执行此操作。

＆＃13;

＆＃13;

$(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);
    });
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

按钮是一个用于点击

的ID

滚动是滚动到

的位置