Question

Let’s say I want to create a website that contains one page. All the content is dynamic and generated using JavaScript with DOM replacement. The good thing about this is that it creates a better user experience, especially for applications that contain catalogues (online stores, galleries, etc). The problem now comes with linking. Let’s say I’m browsing the site and I feel like sharing that particular thing I’m looking at with someone, but the problem is the link is always the same since it’s JavaScript that’s doing the magic. So the question comes: how can I create a fully JavaScript run website while maintaining the ability to link?

Now there’s hash linking, but I’m failing miserably. I’ve tried overriding all <a> tags, changing the hash, and preventing the default action like so

$("a").click( function(){

    window.location.hash = $(this).attr("id");
    processHash();
    return false;
}); 

Yet, it will randomly scroll my body for no reason.

I’d like some insights on the restrictions of linking in a fully dynamic website. Thanks.

Answer 1

Here is one simple thing you can do:

window.onload = function () {
   processHash();
}

or it can be using jquery $(function () {…});

what happens here is when the page is loaded example http://www.example.com/#some-link
the page content is loaded first then your function that handle links processHash(); will do its work