javascript - 带有 prev next 的 Jquery scrolltop 无法正确滚动

Question

我正在尝试使用上一个和下一个按钮设置 jquery scrolltop，以便用户可以在可滚动的 div 中滚动。

我看到这篇文章 LINK并试图为我的应用程序设置，但它似乎没有滚动到下一个/上一个 div 的顶部。

谁能指出问题出在哪里，或许还有解决方案？任何输入将不胜感激，谢谢。

CSS:

.image_holder {
display: block;
height: 100%;
}

.section{
position: relative;
height: 80vh;
background: rgba(255, 226, 57, 0.0);
overflow-y: scroll;
margin: 0 auto;
border: #000000 solid thin;
}

HTML:

<div class="page_scroller">
<ul >
<li class="list-unstyled col-lg-6 bg-primary"><a href="#" id="prev" class="arrow-up prev">Up</a></li>
<li class="list-unstyled col-lg-6 bg-primary"><a href="#" id="next" class="arrow-down next">Down</a></li>
</ul>
</div>

<div class="section" >

        <div id="highlight-1" class="current image_holder">A</div>
        <div id="highlight-2" class="image_holder ">B</div>
        <div id="highlight-3" class="image_holder ">C</div>
        <div id="highlight-4" class="image_holder ">D</div> 

</div>

J查询:

var scrollTo = function(element) {
    console.log(element);
    $('.section').animate({
        scrollTop: element.offset().top
    }, 500);
}

$('.next').click(function(event) {
    event.preventDefault();
    var $current = $('.section > .image_holder.current');
    var $next = $current.next().first();
    if ($next.length!=0) {
        $current.removeClass('current')
        $next.addClass('current');
        scrollTo($next);
    }
});

$('.prev').click(function(event) {
    event.preventDefault();
    var $current = $('.section > .image_holder.current');
    var $prev = $current.prev().first();
    if ($prev.length!=0) {
        $current.removeClass('current')
        $prev.addClass('current');
        scrollTo($prev);
    }
});

My JSFiddle

Answer 1

我认为它实际上按预期工作:它滚动到该部分，但它基于视口(viewport)的顶部边缘滚动，而不是基于溢出的 div。

尝试替换

$('.section').animate({
    scrollTop: element.offset().top
}, 500);

与

$('.section').animate({
    scrollTop: element.position().top
}, 500);