click li, go to next li

Question

Can't find a simple solution to this, I know it's easy and I've tried a few things but I can't quite get it to work. I'm currently working with a sidescrolling site and I want every time you click an image (contained in an li) it scrolls to the next li. I have jQuery plugin localscroll so it smoothly goes from one to the next, and that's working. I need to now write a code that triggers jQuery to utilize the localscroll function and go to the next li. Right now I have this, but I know it's not right:

$(document).ready(function () {
    $('.wrapper ul li').click(function() {
     $(this).next(li).localScroll();
    });
});

Answer 1

After reading the documentation for this here, I figured out the correct of way of using it. Let us say, you the .wrapper element as the one overflowing or in which you want to scroll. You can do the following.

$(document).ready(function () {
    var gallery = $('.wrapper ul li')

    $(gallery).click(function() {
           $('.wrapper').localScroll({
              target:$(this).next('li')
            });

    });
});

Answer 2

Accoding to the ScrollTo examples, you need to do this:

$(container).scrollTo(element);

e.g.

$(document).ready(function () {
    $('.wrapper ul li').click(function() {
        $(window).scrollTo($(this).next('li'));
    });
});