Jquery scrolltop与prev next不能正常滚动

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>

Jquery：

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

我认为它实际上像预期的那样工作:它滚动到部分，但它滚动基于视区的顶端边缘，而不是基于溢出的div。

尝试替换

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

使用

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