Move scroll of a div with jquery

Question

Hi,

Im trying to move the scroll of a div with jquery, but i dont know what im doing wrong.

Here is the code that im using:

$("#CategoryList").animate({ scrollLeft: "=-5" }, "slow");

where CategoryList is the ID of my div with scroll.

Could you give me a hand? Thanks in advance. Josema.

Answer 1

Try this instead (notice it's -= not =-):

$("#CategoryList").animate({ scrollLeft: "-=5" }, "slow");

Answer 2

Thanks Ryan for your fast response,

I change it but still doesnt work.

My code is very small, and i dont see any error.

Here is:

<span id="NavigateBackward"><</span><span id="NavigateFordward">></span>
 <div id="FixedWindow" style="width:129px;overflow:hidden;">
     <div id="CategoryList" style="width:2000px;overflow:auto;">
         <p class="MiniCategory" style="display:inline;">Category 1</p>
         <p class="MiniCategory" style="display:inline;">Category 2</p>
         <p class="MiniCategory" style="display:inline;">Category 3</p>
         <p class="MiniCategory" style="display:inline;">Category 4</p>
         <p class="MiniCategory" style="display:inline;">Category 5</p>
     </div>
  </div>
 <script language="javascript" type="text/javascript">
                $(document).ready
                (
                    Initialize()
                );

                function Initialize()
                {
                    InitList();

                }

                function InitList()
                {
                    $("#NavigateBackward").hover
                    (
                        function() 
                        {
                            $("#CategoryList").animate({ scrollLeft: "+=5" }, "slow");

                        }
                    )

                    $("#NavigateFordward").hover
                    (
                        function()
                        {
                            $("#CategoryList").animate({ scrollLeft: "-=5" }, "slow");

                        }
                    );
                }


 </script>

Thanks in advance. Kind Regards. Josema.

Answer 3

You should use "+=5" and animate the #FixedWindow , not your CategoryList

function InitList(){
  $("#NavigateBackward").hover(function(){
      $("#FixedWindow").animate({ scrollLeft: "+=5" }, "slow");
  });

  $("#NavigateFordward").hover(function(){
    $("#FixedWindow").animate({ scrollLeft: "-=5" }, "slow");
  });
}

.

<span id="NavigateBackward"><</span>
<span id="NavigateFordward">></span>
<div id="FixedWindow" style="width:129px;overflow:hidden;">
     <div id="CategoryList" style="width:2000px;overflow:auto;">
         <p class="MiniCategory" style="display:inline;">Category 1</p>
         <p class="MiniCategory" style="display:inline;">Category 2</p>
         <p class="MiniCategory" style="display:inline;">Category 3</p>
         <p class="MiniCategory" style="display:inline;">Category 4</p>
         <p class="MiniCategory" style="display:inline;">Category 5</p>
     </div>
</div>