javascript – jQuery：点击滚动到下一部分

2024年2月1日 221次阅读

我有一个功能设置,当你点击.section-down-arrow-wrap时它将遍历祖先并找到最接近的.fullscreen元素,想法是当你点击它时它会将.section元素向下滚动到下一个.fullscreen的实例,你可以看到这个小提琴：
https://jsfiddle.net/neal_fletcher/d9zbw1k2/它没有按预期工作,有些滚动到下一个,有些没有,有些向上滚动你.我还需要一种方法,它可以在树上找到全屏,因为它不一定是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

点赞