About a year ago I wrote the post Making linking between anchors in an IFrame work in Firefox 4 and above which detailed a workaround for making anchor tags in IFrame’s function as expected. Unfortunately this fix stopped working as of Firefox 11 and in Chrome as well. Firefox changed how it calculated the offset of an element inside of the IFrame. It used to calculate it relative to the parent window but now calculates relative to the IFrame window. To fix this you now must add the distance between the top of the page and the IFrame in the call to the scrollto function.
Here is the updated code:
$(function() {
var iframeOffset = $("#ID_OF_MY_IFRAME", window.parent.document).offset();
$("a").each(function () {
var link = $(this);
var href = link.attr("href");
if (href && href[0] == "#") {
var name = href.substring(1);
$(this).click(function () {
var nameElement = $("[name='" + name + "']");
var idElement = $("#" + name);
var element = null;
if (nameElement.length > 0) {
element = nameElement;
} else if (idElement.length > 0) {
element = idElement;
}
if (element) {
var offset = element.offset();
window.parent.scrollTo(offset.left, offset.top + iframeOffset.top);
}
return false;
});
}
});
});
When using this code you must update the text “#ID_OF_MY_IFRAME” with the id that you give the IFrame tag in the parent page.
I create a demo page where you can see the above fix in action.