Question

i wonder how i can solve the following problem.

i have a horizontal scrollbar with floating divs side by side (.picture_holder). I wonder if i can find() this elements and animate a scroll event to the startpoint of every image. If i reach the last div i it to scroll to the first.

#
$('.next').click(function(){
#
$('html, body').animate({scrollTo:Position von .picture_holder2}, 'slow');
#
});  

?? any ideas how i could solve this?

Answer 1

You can scroll horizontally to a position using jQuery’s .scrollLeft() function.

http://api.jquery.com/scrollLeft/

If you want it animated, do this:

Live Example: http://jsfiddle.net/b5Xps/

$('.next').click(function(){

      // Get left offset position of the target
    var leftPosition = $('.picture_holder2').offset().left;

      // animate the scrollLeft property to that position
    $('html,body').animate({scrollLeft: leftPosition }, 1000);​

});