How to get the anchor from the URL using jQuery?

Catering to all scenarios

The quick solution outlined above works in most cases. Nonetheless, it's prudent to consider various scenarios:

iFrame navigation

When working with iFrames, use window.top.location.hash.substring(1) to access the parent window's URL.

var iFrameAnchor = window.top.location.hash.substring(1); // Now, we're on top of things.


URL variable handling

Extract the anchor from a predefined URL string:

var url = "http://www.example.com/page.html#anchor";
var anchor = url.split('#').pop(); // Pop goes the weasel.


Existence of hash

Prior to the extraction process, confirm the existence of a hash in the URL:

// Hashed crown or a barren land?
if(url.indexOf('#') != -1) {
  var anchor = url.split('#').pop();
} else {
  var anchor = ''; // Maybe next time, #.
}


Ready-made function

With the function below, simply call upon it anytime to extract an anchor:

function getAnchorFromURL(url) {
  var a = document.createElement('a'); 
  a.href = url;
  return a.hash.substring(1); // Anchors away!
}
var anchor = getAnchorFromURL("http://www.example.com/page.html#anchor");


But careful! Always ensure you sanitize inputs and account for encoding discrepancies when working with URLs directly.

Dynamic content adaptation

When your page content changes dynamically, window.location.hash might not keep up. Use jQuery's .on() method to stay updated:

$(window).on('hashchange', function() {
  var dynamicAnchor = window.location.hash.substring(1); // Changing faster than a chameleon!
});


This allows you to respond to real-time changes in the page URL.

Diving deeper: navigating anchors with finesse

Defensive Programming: A stitch in time

Ensure your code is robust against instances of empty or non-existent hashes:

var anchor = window.location.hash.substring(1) || 'default-anchor'; // Backup plan: activated!


Resourcefulness: Make jQuery work for you

If you require the full URL, $.prop() is the treasured tool in your jQuery toolbox:

var fullAnchor = $(location).prop('hash'); // A little '#' never hurt anyone


Clarity: Code as clear as a crystalline lake

Choose variable names that accurately reflect their purpose:

var currentPageAnchor = $(location).attr('hash').substring(1); // Current page? Checked.
