Mobile Safari - Scroll to element

Question

This question is only applicable for mobile Safari.

On my site I have reviews, and I have review stars at the top of my product. When the user taps the review stars I want the screen to scroll down to the reviews of the product. On Android and Desktop the page scrolls as excepted, but on iOS all it does is flicker and stay in the same location.

Here is the code:

$('html, body').animate({
    scrollTop: $("#reviews").offset().top,
    scrollLeft: 0
}, 400);

Here is a jsbin demonstrating the problem.

http://jsbin.com/losuz/3/

Thanks

Answer 1

I did find the correct answer to my issue, the scrollLeft was causing issues in iOS.

$('html, body').animate({
    scrollTop: $("#reviews").offset().top
}, 400);

This can be tested in http://jsbin.com/losuz/6/.

For comparison you can see the functionality suggested in Oscar Paz's answer here: http://jsbin.com/losuz/5/

I prefer the animation for the smoothness of the slide, but Oscar's answer is also valid.

Answer 2

Have you tried scrollIntoView?

$('#reviews')[0].scrollIntoView();