Question

I’m using this code to know what is in the url after # sign:

var a = document.URL.split("#")[1];

For example, if the url of page is http://example.com/path/to/somewhere/#contentpart, variable a will contains contentpart.

But the problem is, user may click on a link that points to same page but another part (for example: <a href="#footer">Go to footer</a>), and if so, page will not reload. (just page will be navigated to somewhere else)

My question is, how to detect when URL changes after # sign in the same page?

Any javascript/jQuery methods are welcome.

Answer 1

I’d suggest, bearing in mind your current code:

$(window).on('hashchange', function(e){
    var newHash = document.href.split('#')[1];
});

Though it’s a little easier to simply use:

$(window).on('hashchange', function(e){
    var newHash = document.location.hash;
    console.log(newHash);
});

JS Fiddle demo.

If you don’t want the hash to include the # character, then use instead:

$(window).on('hashchange', function(e){
    var newHash = document.location.hash.substring(1);
    console.log(newHash);
});

JS Fiddle demo.