因此，我正在制作一个列表，您可以通过单击按钮滚动浏览该列表。它还需要有一个可见且工作的滚动条。但我不知道如何编辑我的代码以使它们都能正常工作。我可以让按钮或滚动条工作，但不能同时工作。有人可以帮忙吗？
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>
我究竟做错了什么？请有人帮忙！
谢谢你！
以下是滚动到顶部和底部的方法：
https://jsfiddle.net/45cmhys8/ 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);
})
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
