'Go to anchor AFTER loading

The Idea

I have a User Manual page, it is kinda big, and each topic has a anchor linked to it.

In my product page, I can link the client straight to that topic in the manual with a anchor, like:

Manual:

<a href="#manage_options">Managing Options</a>
<!-- Instructions on how to manage options -->

Product Page:

<a href="http://example.com/manual/#!/manage_options">How to Manage Options</a>

The Problem

When I click the "How to Manage Options" link in Product Page, it goes to the manual and immediately to the #manage_options anchor

But it often stops in the wrong place, because it goes to the anchor, then it keeps loading images, which changes the position of the content

Is it possible to wait for all the content to be loaded, then it goes to the anchor, or any better solution for this problem?

htmlanchorloading


Solution 1:[1]

You can solve the problem using a JQuery script, this can postpone the anchor link after the page is loaded, i added an offset of 20 px also.

$(document).ready(function() {
    if(window.location.hash) {
        $('html, body').animate({
            scrollTop: $(window.location.hash).offset().top - 20
        }, 500);
    }
});

Solution 2:[2]

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

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

(Copied and fixed from https://stackoverflow.com/a/21447965/371908)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 zod
Solution 2 boxed

Related Questions