jQuery scrollRight?

Question

I have the following code that seems to scroll a div on click all the way to the left. I am wondering if:

1. there is a way to get it to get it to scroll only 200

Answer 1

I found this solution without animation:

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

hope it helps.

Answer 2

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

Simple as that.

Answer 3

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

Answer 4

use the below like script.. DEMO

 <script type="text/javascript">
        $(window).load(function() {
            $("div#makeMeScrollable").smoothDivScroll({ 
                autoScroll: "onstart" , 
                autoScrollDirection: "backandforth", 
                autoScrollStep: 1, 
                autoScrollInterval: 15, 
                startAtElementId: "startAtMe", 
                visibleHotSpots: "always"
            });
        });
    </script>


<div id="makeMeScrollable">
    <div class="scrollingHotSpotLeft"></div>
    <div class="scrollingHotSpotRight"></div>
    <div class="scrollWrapper">
        <div class="scrollableArea">
            <img src="images/demo/field.jpg" alt="Demo image" />
            <img src="images/demo/gnome.jpg" alt="Demo image" />
            <img src="images/demo/pencils.jpg" alt="Demo image" />
            <img src="images/demo/golf.jpg" alt="Demo image" id="startAtMe" />
            <img src="images/demo/river.jpg" alt="Demo image" />
            <img src="images/demo/train.jpg" alt="Demo image" />
            <img src="images/demo/leaf.jpg" alt="Demo image" />
            <img src="images/demo/dog.jpg" alt="Demo image" />
        </div>
    </div>
</div