iPad Flicker on auto scroll using JQuery and Scrollto plugin

Question

I am having a bit of a weird problem with iOS platform for a page i am developing. This is the page in question. When clicking any of the case study images, the page will

Answer 1

You need to add e.preventDefault(); to each .click() call. This prevents the browser's default action, which is to stay in the same place. Hope this helps!
i.e.

$("#quicksand li, .client-list li").click(function (e) {
  e.preventDefault();
  ...
});

Answer 2

If you need vertical scroll only, you could use {'axis':'y'} as settings to scrollTo method.

$.scrollTo(*selector*, *time*, {'axis':'y'});

Answer 3

I'm having the same flickering on iPhone -- even with the preventDefault and return false options of canceling the default click event. It appears that on the device it tries to go back to the top of the page before scrolling. If you have both a scrollTop and scrollLeft animation going on it really gets buggy. It's jQuery's issue.. I've seen a scrolling method with mootools that doesn't have this issue. See this page: http://melissahie.com/

Answer 4

I will also confirm Tund Do's method works flawlessly. If you need a "left/right" variation of the same thing (as I did) here it is:

$('.pg6').click(function(){
    var target = $('#page6');
    if (target.length)
    {
        var left = target.offset().left;
        $('html,body').animate({scrollLeft: left}, 1000);
        return false;
    }
});

I would guess you could combine the two, grab the top position and chain the animates for a "left/right/up/down" animation also.

Answer 5

Defining {'axis':'y'} has made it right! It helped me with slideUp/Down flickering.

Answer 6

If you're just scrolling the page vertically you can replace the entire jQuery scrollTo plugin with this simple line:

$('html,body').animate({scrollTop: $("#scrollingTo").offset().top}, 1000, 'easeOutCubic');

Personally I do something like this

$('html,body').animate({scrollTop: $("#step-1").offset().top-15}, 1000, 'easeOutCubic',function(){
  //do stuff
});

I found that if I try to do other js work while it's scrolling it makes the browser crunch and the animation isn't smooth. But if you use the callback it'll scroll first, then do what you need.

I put a -15 at the end of .top because I wanted to show the top edge of the div I was scrolling do, simply for aesthetic purposes. 1000 is the duration in milliseconds of the animation.

Credit goes to the poster, animate, for the tip off.