javascript - 滚动按钮 - 使用 jQuery

Question

所以我正在制作一个列表，您可以通过单击按钮来滚动浏览该列表。而且它还需要有一个可见的滚动条并且也能正常工作。但我不知道如何编辑我的代码以使它们都起作用。我可以让按钮工作或滚动条工作，但不能同时工作。有人可以帮忙吗？

var itemsToShow = 3;

$('#scroll>li').each(function(i,k) {
    var ele = $(this);
    $(ele).attr('id', 'scroll' + i);

});


$('#up').bind('click', function() {
    if ($('#scroll0:hidden').length > 0)
    {
        // This means we can go up
        var boundaryTop = $('ul li:visible:first').attr('id');
        var boundaryBottom = $('ul li:visible:last').attr('id');

        if ($('ul li#'+ boundaryTop).prev().length > 0)
        {
            $('ul li#'+ boundaryTop).prev().show();
            $('ul li#'+ boundaryBottom).hide();
        }
    }
});

$('#down').bind('click', function() {
    if ($('#scroll li:last:hidden').length > 0)
    {
        // This means we can go down
        var boundaryTop = $('#scroll li:visible:first').attr('id');
        var boundaryBottom = $('#scroll li:visible:last').attr('id');

        if ($('#scroll li#'+ boundaryBottom).next().length > 0)
        {
            $('#scroll li#'+ boundaryBottom).next().show();
            $('#scroll li#'+ boundaryTop).hide();
        }
}
});

.lg {
    overflow-x:auto; 
    height:90px;
    overflow-y:auto;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="lg">
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
</ul>

<div id="updown">
  <a class="btn btn-primary" id="up" href="#">up</a>
<a class="btn btn-primary" id="down" href="#">down</a>
</div>

我做错了什么？有人请帮忙!

谢谢!

Answer 1

这是滚动到顶部和底部的方式:

https://jsfiddle.net/45cmhys8/

// Scroll to the top
$('a#up').on('click', function(){
   $('.lg').animate({ scrollTop: 0 }, 600);
})
// Scroll to the bottom
$('a#down').on('click', function(){
   $(".lg").animate({ scrollTop:$(document).height()}, 600);
})