jQuery:点击滚动到下一节

jQuery: click to scroll to next section

本文关键字：一节 滚动 jQuery      更新时间：2023-09-26

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

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

您需要为此执行$(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>

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

button是一个可以点击的id

scroll是is滚动到

的位置
相关文章：