Question

I’m trying to do a scrollable container using external buttons, without using a plugin. I have a container called #feed with a fixed width and height, and overflow hidden. Inside that I have #feed-inner, which is 560px tall. There are up and down arrows which move #feed-inner up and down, but I need to restrict the animation so #feed-inner can’t be moved passed 0 or the max height (560px).

$('#arrow-next').click(function() {
  $('#feed-inner').animate({
    top: '-=70'
  }, 500, function() {
  });
});
$('#arrow-prev').click(function() {
  $('#feed-inner').animate({
    top: '+=70'
  }, 500, function() {
  });
});

Answer 1

You can get the value of the current position of #feed-inner relative to #feed by using $.position. With that you can check to see if the position is at 0 or the max height of 560px. The code would look something like this:

$('#arrow-next').click(function() {
  $('#feed-inner').animate({
    top: parseInt($('#feed-inner').position().top) == 0 ? '0' : '-=70'
  }, 500, function() {
  });
});
$('#arrow-prev').click(function() {
  $('#feed-inner').animate({
    top: parseInt($('#feed-inner').position().top) == 560 ? '560' : '+=70'
  }, 500, function() {
  });
});

Note that #arrow-next would be bringing #feed-inner upward (making it appear like the content is scrolling downwards) which seems contrary to the label “next” and vice versa for #arrow-prev.

One additional note is that when the position of #feed-inner reaches 560px, there will be a blank canvas since the element has moved completely to the bottom and what you will see is an empty #feed container. To avoid this, you would want to calculate the height of the #feed container and ensure that #feed-inner does not move passed 560 – $(#feed).outerHeight();