Animate body, html on mobile safari - position:fixed div issue


I’m using the following to animate the screen;

function goToByScroll(id){
  $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');

which works great on desktop browers, but on safari mobile, the menu/nav doesn’t work correctly.

The nav is inside a fixed div. When you click a button the first time it scrolls to the area fine. But after that none of the buttons work. If you move the screen slightly by finger scolling the buttons work again one more time.

A link to the example of the work in progress is here

Any help on this would be greatly received.


position: fixed doesn’t work on the iPhone, but there have been various solutions suggested, such as this:

Hi Ralph.m

Thanks for the links, I will check them out.


Just looking at the second of links, position:fixed works now on iOS5… I do remember I tried a fixed on a web build a few years back and it didn’t work at all. Looking at my example in the first post, the fixed part does work, but is not fully functionable… I’m not sure what to try next…?