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.

/

Thanks

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./losuz/3/

Thanks

• javascript
• jquery
• mobile-safari

• 1 get the url and than just add a #your_id to it to scroll to that div – Daniel Bejan Commented Mar 4, 2014 at 14:51
• @csanonymus it appears I fell into the hammer and the nail scenario, when you like jQuery, every problem can be solved by jQuery ... thanks for the succinct response, you are right, though I do like the smooth transition that the animate gives me. – Duane Commented Mar 4, 2014 at 14:56

2 Answers 2

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./losuz/6/.

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

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

Have you tried scrollIntoView?

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