Scroll to top of document with jQuery not working correct

Question

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

$.ajax({
                        url: 'http://dev.24323423.co.uk/getSingle.php',
                        dataType: 'jsonp',
                        data: { dbId: itemId },
                        jsonp: 'jsoncallbackSingle',
                        timeout: 8000,
                        success: function(data, status){
                            $.each(data, function(i,item){ 
                                var linkedPageSingle = '<p><a href="#" onClick="homePage(1)">Back</a></p><h2>'+item.eventName+'</h2>'
                                    + '<p>Description: '+item.description+'</p><p>Type: '
                                    + item.type+'</p><p id="pageid">'+item.id+'</p>';

                                $('#single').append(linkedPageSingle);
                            });
                        },

                        error: function(){
                            $('#single').text('There was an error loading the data.');
                        }

                    });

Answer 1

Use window.scrollTo(0, 0); or $(document).scrollTop(0); to scroll the document to the top, instead of $("#single").scrollTop(0); .

.scrollTop() sets the top scroll offset value for the selected element, not relative to the document.

If you just want the page to scroll such that #single is visible (not way to the top), use $("#single")[0].scrollIntoView(); .

Note: You might want to move the scrolling part to after the show() and hide() .

Answer 2

My guess is that the scrolling is executing before the first div is truly hidden and the second div is truly visible. Try this:

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

Answer 3

First, thank you those who have helped. However rather than trying to solve the problem that I had I found a way around it. This is what I used:

 var linkedPage = '<h2><a href="#" onClick="takeToSingle('+item.id+')">'+item.eventName+'</a></h2>'
                            + '<p>Date: '+item.date+'</p><p>Description: '+item.description+'</p><p>Type: '
                            + item.type+'</p><p id="pageid">'+item.id+'</p>';

                        output.append(linkedPage);

 function takeToSingle(itemId){
                localStorage.setItem("pageID",itemId);
                document.location.href = 'page1.html';
            }

This sets a localstorage item and is sent over to page1.html where I retrieve it:

 pageId = localStorage.getItem("pageID");