滚动按钮 - 使用jQuery [英] Scrolling buttons - with jQuery

问题描述

所以我正在做一个列表，你可以通过点击按钮来滚动。它也需要有一个滚动条可见和工作。但我不知道如何编辑我的代码来让它们都起作用。我可以让按钮工作或滚动条，而不是两个。有人可以帮忙吗？

var itemsToShow = 3; $（'＃scroll> （'，'）; $（ele）.attr（'id'，'scroll'+ i）;}）; $（'＃up'）。 bind（'click'，function（）{if（$（'＃scroll0：hidden'）。length> 0）{//这意味着我们可以上去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）{//这意味着我们可以下去var boundaryTop = $（'＃scroll li：vi （'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：汽车;高度：90像素;溢出-Y：汽车; }

 < script src =https：// ajax .googleapis.com / ajax / libs / jquery / 2.1.1 / jquery.min.js>< / script>< ul class =lg> <李>文字及LT; /锂> <李>文字及LT; /锂> <李>文字及LT; /锂> <李>文字及LT; /锂> <李>文字及LT; /锂> <李>文字及LT; /锂> <李>文字及LT; /锂> < li>文字< / li>< / ul>< div id =updown> < a class =btn btn-primaryid =uphref =＃> up< / a>< a class =btn btn-primaryid =downhref =＃> ;向下< / a>< / div>  

我做错了？有人请帮忙！

谢谢！

解决方案

和底部：

https://jsfiddle.net/45cmhys8 /

  //滚动到顶部
 $（'a＃up'）。on 'click'，function（）{
 $（'。lg'）。animate（{scrollTop：0}，600）; 
}）
 //滚动到底部$ b $ （'click'，function（）{
 $（。lg）。animate（{scrollTop：$（document）.height（）}，600）; b $（'a＃down'）。 
}）
  

So I'm working on a list that you can scroll through by clicking on buttons. And it also needs to have a scrollbar visible and working too. But I don't know how to edit my code to get them both to function. I can either have the buttons working or the scrollbar, not both. Can someone help?

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>

What am I doing wrong? Someone please help!

Thank you!

解决方案

Here is how you scroll to top and bottom:

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);
})

这篇关于滚动按钮 - 使用jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！