CODEWITHSUNDEEP
jqueryscrolljquery-animate
applebeetrootcarrot
applebeetrootcarrot

Reputation: 25

Jquery: Animate ScrollLeft by a certain amount

var xxx= 100px;

$(".scrollbutton").click(function () { 
    $('.selector').animate({scrollLeft:xxx)}, 500);
});

Now this scrolls to the specific position 100px from the start. How to phrase this such that every time the scrollbutton is clicked, it scrolls left by 100px?

Thanks in advance.

Upvotes: 1

Views: 2264

Answers (2)

Robin
Robin

Reputation: 1216

I suggest the following solution:

var scrollLeftAmount = 100;
$('.scrollbutton').click(function () { 
    $('.selector').animate({
        scrollLeft:'+='+scrollLeftAmount
    },500);
});

Working Fiddle: http://jsfiddle.net/ZNvLu/2/

Based on the jQuery documentation for .animate(): http://api.jquery.com/animate/#basic-usage

Animated properties can also be relative. If a value is supplied with a leading += or -= sequence of characters, then the target value is computed by adding or subtracting the given number from the current value of the property.

Example:

[...] left: "+=50", [...]

Upvotes: 1

tdhulster
tdhulster

Reputation: 1621

Try this out: 

var xxx= 100;

$(".scrollbutton").click(function () { 
    $('.selector').animate({scrollLeft:"+="+xxx)}, 500);
});

Upvotes: 2

Related Questions