Make anchor links refer to the current page when using <base>

Solution 1:

I found a solution on this site: using-base-href-with-anchors that doesn't require jQuery, and here is a working snippet:

<base href="https://example.com/">

<a href="/test">/test</a>
<a href="javascript:;" onclick="document.location.hash='test';">Anchor</a>

Or without inline JavaScript, something like this:

document.addEventListener('DOMContentLoaded', function(){
  var es = document.getElementsByTagName('a')
  for(var i=0; i<es.length; i++){
    es[i].addEventListener('click', function(e) {
      e.preventDefault()
      document.location.hash = e.target.getAttribute('href')
    })
  }
})

Solution 2:

Building upon James Tomasino's answer, this one is slightly more efficient, solves a bug with double hashes in the URL and a syntax error.

$(document).ready(function() {
    var pathname = window.location.href.split('#')[0];
    $('a[href^="#"]').each(function() {
        var $this = $(this),
            link = $this.attr('href');
        $this.attr('href', pathname + link);
    });
});

Solution 3:

A little bit of jQuery could probably help you with that. Although base href is working as desired, if you want your links beginning with an anchor (#) to be totally relative, you could hijack all links, check the href property for those starting with #, and rebuild them using the current URL.

$(document).ready(function () {
    var pathname = window.location.href;
    $('a').each(function () {
       var link = $(this).attr('href');
       if (link.substr(0,1) == "#") {
           $(this).attr('href', pathname + link);
       }
    });
}

Solution 4:

Here's an even shorter, jQuery based version I use in a production environment, and it works well for me.

$().ready(function() {
  $("a[href^='\#']").each(function() {
    this.href = location.href.split("#")[0] + '#' + this.href.substr(this.href.indexOf('#')+1);
  });
});

Solution 5:

If you use PHP, you can use following function to generate anchor links:

function generateAnchorLink($anchor) {
  $currentURL = "//{$_SERVER['HTTP_HOST']}{$_SERVER['REQUEST_URI']}";
  $escaped = htmlspecialchars($currentURL, ENT_QUOTES, 'UTF-8');
  return $escaped . '#' . $anchor;
}

Use it in the code like that:

<a href="<?php echo generateAnchorLink("baz"); ?>">baz</a>