Scrolling Facebook Canvas

Question

I'm building a Facebook app. Facebook canvas type is FBML, then I put the fb:iframe inside the index page, load my ajax engine inside of that iframe, and after that, all content is updated trhough ajax. Sometimes the content pages can be long and requre the user to scroll down (with the main browser scrollbar). But when you click a link after scrolling down and the next content page is loaded, the scrollbar remains where it was (which makes sense), so you have to scroll back to the top.

I managed to solve this by forcing a scroll after the data is loaded. And it does get to the top of the div, but not to the top of the page, where the facebook bar is. I tried scrolling the parent window but thats not possible due to cross-site security restrictions.

I noticed that when you use the FB.ui (ie. to create a stream to publish) from within the same place where I load my content, it does scroll all the way to the top. So I guess maybe there's a FB api call to do that, but I cant find it.

Or maybe some way to force the browser to scroll all the way up no matter if you're at an iframe?

Any ideas?

Answer 1

UPDATE April 2011: Facebook added the FB.CanvasClient.scrollTo method to their new JavaScript SDK. All you have to do now is:

FB.Canvas.scrollTo(0,0);

More info here: http://developers.facebook.com/docs/reference/javascript/FB.Canvas.scrollTo/

---

UPDATE April 2011: The following content is now outdated, but I'm leaving it here for reference purposes...

Are you using the new JavaScript SDK or the old one? With the old one, you can do this:

FB.CanvasClient.scrollTo(0,0)

Unfortunately, Facebook doesn't support the scrollTo() method with the new JavaScript API. I haven't tried this next technique with an FBML app, but I did have success with it using it in a Canvas iframe app (code borrowed from here: http://forum.developers.facebook.net/viewtopic.php?id=32906):

var x = 0, y = 0;
$("body").append('<iframe id="scrollTop" style="border:none;width:1px;height:1px;position:absolute;top:-10000px;left:-100px;" src="http://static.ak.facebook.com/xd_receiver_v0.4.php?r=1#%7B%22id%22%3A0%2C%22sc%22%3Anull%2C%22sf%22%3A%22%22%2C%22sr%22%3A2%2C%22h%22%3A%22iframeOuterServer%22%2C%22sid%22%3A%220.957%22%2C%22t%22%3A0%7D%5B0%2C%22iframeInnerClient%22%2C%22scrollTo%22%2C%7B%22x%22%3A' + x + '%2C%22y%22%3A' + y + '%7D%2Cfalse%5D" onload="$(\'#scrollTop\').remove();"></iframe>'); 

While the above technique will scroll the window to the top, I didn't find it 100% reliable. For example, it doesn't seem to work in Facebook's new Page iframe tabs. So I've resorted to using this 100% reliable technique, but unfortunately, it will only scroll to the top of the iframe:

Place this just below your opening tag:

<a id="top" name="top" style="display:block;height:1px;width:1px;"></a>

And the JavaScript that will do the scrolling;

     window.location.hash = 'top';
     window.location.hash = '';