Anchor Links inside Facebook Apps

November 3, 2012

If you haven’t noticed, you can’t use anchor links:

<a href="#hello">Go to id="hello"</a>

Inside Facebook Apps (Page tab, Canvas app, etc). So I wrote a little snippet that emulates this behaviour by using FB.Canvas.scrollTo(x, y);

/*
anchorlinks-fbcanvas.js

Enables anchor links (<a href="#hello">Go to id="hello"</a>) in
Facebook Canvas (page tabs, canvas app, etc)

Requires: jQuery, Facebook JS SDK
*/

jQuery(function($) {
  $('a').filter(function() {
    return $(this).attr('href').match(/^#/);
  }).each(function(i, el) {
    $(el).click(function(e) {
      e.preventDefault();
      var elementId = $(el).attr('href').replace(/^#(.*)/, '$1');
      var $goTo = $(document.getElementById(elementId));
      FB.Canvas.scrollTo(0, $goTo.offset().top);
    });
  });
});