Question

我正在尝试使用上一个和下一个按钮设置jquery滚动顶部，以便用户可以在可滚动的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);

带有上一个下一个的jQuery滚动顶部无法正确滚动

1 个答案: