ScrollTo next/previous buttons not working on iPhone / iPad

Question

I am using the following to create next/previous buttons in the footer of this page:

function scroll(direction) {

var scroll, i,
        positions = [],
        here = $(window).scrollLeft(),
        collection = $('.block');

collection.each(function() {
    positions.push(parseInt($(this).offset()['left'],10));
});

for(i = 0; i < positions.length; i++) {
    if (direction == 'next' && positions[i] > here) { scroll = collection.get(i); break; }
    if (direction == 'prev' && i > 0 && positions[i] >= here) { scroll = collection.get(i-1); break; }
}

if (scroll) {
    $.scrollTo(scroll, {
        duration: 750       
    });
}

    return false;
}

$("#next,#prev").click(function() {        
    return scroll($(this).attr('id'));        
});        

I grabbed this code from this source.

It works a treat in Chrome and Safari, but not on iPhones and iPads. Clicking on the arrows I get image jumping/flickering with no scrolling.

Any tips? Thanks!

EDIT

I also tried the following, after reading that iPads don't like $(window).scrollLeft(); and IE8 doesn't like window.pageXOffset;:

    if ( agent.match(/(iPhone|iPod|iPad)/) ) {
        here = window.pageXOffset;
    } else {
        here = $(window).scrollLeft();
    }

As well as this when I read that iPads don't scroll the body element:

    if (scroll) {
    $.scrollTo(scroll, {
        target: '#container',
        duration: 750
    });
    }

But still doesn't work on iPad/iPhone.

Answer 1

Ok, got it kinda working by setting the axis, although still buggy on my old iPhone:

    if (scroll) {
    $.scrollTo(scroll, {
        target: '#container',
        duration: 750,
        axis:'x'
    });
    }