Loading new page in facebook iframe application does not reset scroll position

Image: HandShoeMouse

Update: Facebook has provided a method FB.Canvas.scrollTo() for solving this.

Till last post we managed to get a nice looking, stable long page in Facebook iframe application.

As length of the page increased, we had to split the listing on the page and provide with pagination controls at the bottom of the page.

When user used to click for next page the new page used to come but unlike normal page-load in browser, user used to see bottom of the page first. Situation was even bad when content length on next page was less. It appears like a blank page has come up.

Again the logic in the browser was fine. the page in iframe was changing and page containing the iframe was maintaining its state. But for user it was counter intuitive.

Yes, the fix was again simple. Just create a named anchor at the top and jump to that anchor every time page gets refreshed. Following code was added:

	Top Anchor:
	<a id="top" name="top">Top Heading</a>
	Navigation Links:
	<a href="url/of/next/page#top">Next Page</a>

view raw top.html hosted with ❤ by GitHub

Next challenge was to position a light-box correctly in the iframe.

Stay Tuned!!!

#Cheers