jQuery scrollRight? jQuery scrollRight? jquery jquery

jQuery scrollRight?


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


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

Simple as that.


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