External link to anchor - can you delay scroll?

Question

I need to link to directly to an anchor on my site, such as #about. This works fine when you link within the same page. However, when I need to link to the anchor externally, like www.example.com/#about, it doesn't work well.

Because there's a lot of dynamic content on the main page, it hasn't all fully loaded before the anchor link has tried to scroll down to the #about div. So it results in going to the wrong spot on the page.

Is there some way to delay the scroll to the anchor until after the content has fully loaded? Would I need to link to the #about div with jquery instead of a hash?

Answer 1

I haven't tested it yet, but off the top of my head, I think something like this should work if you call it in a window.onload function, or maybe even in a setTimeout() if you have to.

function moveToHash() {
    let urlHash = window.location.hash;

    if(urlHash) {
         window.location.hash = '';
         window.location.hash = urlHash;
    }
}

It might be a little messy, but it should get the job done.