title: Scrolling buttons - with jQuery
body: <p>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?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var itemsToShow = 3;
  
  $('#scroll&gt;li').each(function(i,k) {
      var ele = $(this);
      $(ele).attr('id', 'scroll' + i);
  
  });
  
  
  $('#up').bind('click', function() {
      if ($('#scroll0:hidden').length &gt; 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 &gt; 0)
          {
              $('ul li#'+ boundaryTop).prev().show();
              $('ul li#'+ boundaryBottom).hide();
          }
      }
  });
  
  $('#down').bind('click', function() {
      if ($('#scroll li:last:hidden').length &gt; 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 &gt; 0)
          {
              $('#scroll li#'+ boundaryBottom).next().show();
              $('#scroll li#'+ boundaryTop).hide();
          }
  }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.lg {
      overflow-x:auto; 
      height:90px;
      overflow-y:auto;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;ul class="lg"&gt;
    &lt;li&gt;Text&lt;/li&gt;
    &lt;li&gt;Text&lt;/li&gt;
    &lt;li&gt;Text&lt;/li&gt;
    &lt;li&gt;Text&lt;/li&gt;
    &lt;li&gt;Text&lt;/li&gt;
    &lt;li&gt;Text&lt;/li&gt;
    &lt;li&gt;Text&lt;/li&gt;
    &lt;li&gt;Text&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div id="updown"&gt;
    &lt;a class="btn btn-primary" id="up" href="#"&gt;up&lt;/a&gt;
  &lt;a class="btn btn-primary" id="down" href="#"&gt;down&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What am I doing wrong? Someone please help! </p>
  
  <p>Thank you!</p>