html - chrome/opera anchor shift away after adding dom elements

Question

Say I have a URL: http://rythmengine.org/doc/expression.md#transformer

Immediately after the page is loaded, the anchor is shown correctly, however I have a script to automatically add some iframes across the page, chrome/opera will later on shift away from the anchor #comment, firefox and IE (10) are all good.

Any idea how to fix it in Chrome/opera?

Answer 1

I do not know if I would implement this or not since the iframes do take a noticeable amount of time to load and the user might already be scrolling around the page and get jolted back to the hash element but here is a solution I came up with using jQuery.

Since the iframes are being replaced in the document after it initially loads you can use the .load() function which normally never fires if you just have it on the document.

Demo on this page and edit the fiddle here.

Just add this jQuery code into your script tag where you replace all of the pre code:

Code:

$('iframe').load(function() {
    moveToHash();
});

// Scroll to the url hash element
function moveToHash()
{
    var hashElem = $(window.location.hash);

    // If the hash elment exists
    if(hashElem.length)
    {
        window.scrollTo(hashElem.position().left, hashElem.position().top);
    } 
}

Edit: had a few mistakes and unnecessary in the code that are now fixed.

Answer 2

When every iframe ends loading tell the browser to go to that hash

$('iframe').load(function() {
    document.location.href = document.location.hash;
});