Scrolling buttons - with jQuery

Question

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!

Retros, do you want to it click through the divs? Or scroll to the next group? — knocked loose
– knocked loose, Commented Apr 5, 2017 at 17:06
$('#scroll0:hidden').length is always give you 0. where is element with #scroll0 Id — Ratheesh
– Ratheesh, Commented Apr 5, 2017 at 17:11
So, you need to set a div to an id of scroll because in your example, your lis don't gain an id. Also, you aren't setting a :hidden state anywhere — knocked loose
– knocked loose, Commented Apr 5, 2017 at 17:13

Keith · Accepted Answer · 2017-04-05 17:12:59Z

4

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

answered Apr 5, 2017 at 17:12

Keith

4,1512 gold badges34 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Retros Over a year ago

Simple, but effective! Thanks Keith!

grimdog_john · Accepted Answer · 2017-04-05 17:24:31Z

2

You can use the scrollTop() function in jQuery to do this in a one-liner.

10 is the amount of pixels you want to jump up/down.

$('#up').click(function(){
  $('ul.lg').scrollTop($('ul.lg').scrollTop()- 10);
});

$('#down').click(function(){
  $('ul.lg').scrollTop($('ul.lg').scrollTop() + 10);
});

answered Apr 5, 2017 at 17:24

grimdog_john

7651 gold badge7 silver badges16 bronze badges

Comments

Falkos · Accepted Answer · 2017-04-05 17:18:09Z

0

It looks like you are trying to literally show/hide the fields, which removes them from the flow of the browser. Rather then show/hide, you should probably set the scrollTop position of the scrollable div using javascript, rather then manipulate the elements inside of it.

answered Apr 5, 2017 at 17:18

Falkos

664 bronze badges

Collectives™ on Stack Overflow

Scrolling buttons - with jQuery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related