jQuery scrollRight?

Solution 1:

scrollLeft IS scrollRight. Sort of. All it does is set the amount of horizontal scroll. If you set it to zero then it will be all the way left. If you set it to something greater than zero then it will move to the right!

As far as making it go in increments, you would have to get the current scrollLeft distance and then subtract 200.

$(".leftArrow").click(function () { 
  var leftPos = $('.innerWrapper').scrollLeft();
  $(".innerWrapper").animate({scrollLeft: leftPos - 200}, 800);
});

$(".rightArrow").click(function () { 
  var leftPos = $('.innerWrapper').scrollLeft();
  $(".innerWrapper").animate({scrollLeft: leftPos + 200}, 800);
});

Solution 2:

$('.leftArrow').click(function(event){
    event.preventDefault();
    $('.innerWrapper').animate({scrollLeft:'+=1500'},500);
});

Simple as that.

Solution 3:

I found this solution without animation:

$("#rightArrow").click(function () { 
   $('#outerWrapper').scrollLeft($('#outerWrapper').scrollLeft() + 20);
});

hope it helps.