I am building a smartphone app (iOS) with jQuery. I have 2 divs, one displays a list of events, the other just one event. This is how they look:

<div id="output"> </div> <div id="single" style="background-color: red;"> </div>

First single is hidden on document.ready.

When scrolling down the page and clicking an event it shows #single and hides #output. Now, problem is, it is keeping the current page 'location' for the x + y values rather than going to the top as it would with a new page, so the page appears blank, but the content is out of page view (and cannot scroll). This is how I attempted to bring the document to the top:

function showSingle(itemId){ $('#output').hide(); $('#single').show(); $("#single").scrollTop(0); /* ajax */ }

This however does not bring it to the top, have I made an error? Thanks

EDIT:

this is before I click: imgur.com/Mitlp and this is after click: imgur.com/873pO

It should look like: http://imgur.com/nPGU8

Second Edit: AJAX inside of the function