66

When I use the HTML <base> tag to define a base URL for all relative links on a page, anchor links also refer directly to the base URL. Is there a way to set the base URL that would still allow anchor links to refer to the currently open page?

For example, if I have a page at http://example.com/foo/:


Current behaviour:

<base href="http://example.com/" />
<a href="bar/">bar</a> <!-- Links to "http://example.com/bar/" -->
<a href="#baz">baz</a> <!-- Links to "http://example.com/#baz" -->

Desired behaviour:

<base href="http://example.com/" />
<a href="bar/">bar</a> <!-- Links to "http://example.com/bar/" -->
<a href="#baz">baz</a> <!-- Links to "http://example.com/foo/#baz" -->
6
  • Are you using a server side programming language? You could dynamically inline the current request URI in the link. See also stackoverflow.com/questions/1889076/…
    – BalusC
    Nov 13, 2011 at 17:40
  • @BalusC I'm not, and I'd rather avoid it if possible.
    – Chris Down
    Nov 13, 2011 at 19:13
  • Well, if everything is already static like that, then just use <a href="foo#baz">.
    – BalusC
    Nov 13, 2011 at 20:45
  • I have to say this is so wrong, you set the base to http://server/ and you tell it to navigate to #baz, it will go http://server/#baz, that's how relative URLS work, and that's what using <base> does, it changes what relative URLs are based on. If that's not what you want, your link should not be relative, or it should be relative to the base's href (foo#baz) Dec 12, 2017 at 19:59
  • @JuanMendes where that falls down is if "foo" is an unknown URL. Jul 28, 2020 at 3:04

13 Answers 13

34
+50

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')
    })
  }
})
8
  • 2
    There are many reason of why is not good, some of that are explained here Jan 14, 2016 at 15:12
  • 15
    It is perfectly valid to use inline javascript -- it exists for a reason. The arguments against it in that document are spurious. Should you base your entire large project off inline code? Probably not. Can you use inline code with intention and as a solution to an edge-case/gotchya? Absolutely. It is part of the HTML spec for a reason. Pushing a blanket ban on inline JS because of the filesize of the HTML document is cargo cult nonsense. If you put the same code in an external JS file, the client still downloads those bytes. Mar 25, 2016 at 19:44
  • 3
    This solution doesn't degrade well. On browsers with Javascript disabled (or html parsers using regex) your link will be broken. May 16, 2017 at 12:54
  • 1
    Let's be honest... no modern web page degrades well without JavaScript. Same was largely true in 2017.
    – John Rix
    Aug 26, 2022 at 13:02
  • 1
    @ChrisBaker You really should avoid inline JS since around 2019 and 2020. If you want your site to be guaranteed to be XSS free, you should use CSP headers that prevent inline JS execution. See csper.io/blog/no-more-unsafe-inline Dec 2, 2022 at 21:44
14

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);
    });
});
8

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);
       }
    });
}
2
  • 1
    Whilst this may be fine in some situations, the demographic for the site I'm making are the sort that may have JavaScript disabled (or not available). Since the only fallback for such a case would be breakage, that seems a bit concerning.
    – Chris Down
    Nov 13, 2011 at 21:00
  • 1
    Your best bet, then, is to code all links with full relative paths from the baseURL, including anchors. Nov 13, 2011 at 23:24
3

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);
  });
});
5
  • Why the downvote? It may not be elegant, but it's basically the same approach as other answers here that are nowhere near as succinct and yet have been voted up.
    – contendia
    Feb 10, 2016 at 9:18
  • 1
    Somebody probably down-voted since it didn't work for THEIR situation and knew not how to adapt. I see nothing wrong with this aside from no mention of the (assuming jQuery) library requirement.
    – Mavelo
    Dec 10, 2017 at 20:05
  • @Robert Good point. I updated the post to reflect the jQuery requirement. Thx for the feedback.
    – contendia
    Dec 12, 2017 at 19:10
  • 2
    Suggesting use of jQuery when jQuery is not mentioned is shunned upon. Dec 12, 2017 at 20:02
  • 1
    While this first and foremost a learning site, coders should know how to convert jquery into vanilla javascript. Especially since nearly every example on this thread depends on one js library or another. libraries do the same things, just simplify getting from point A to B :P I upvoted his solution since it is a perfectly valid solution IMO
    – Mavelo
    Dec 13, 2017 at 2:31
3

You could also provide an absolute URL:

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

Rather than this

<a href="#test">test</a>
2

I'm afraid there is no way to solve this without any server-side or browser-side script. You can try the following plain JavaScript (without jQuery) implementation:

document.addEventListener("click", function(event) {
  var element = event.target;
  if (element.tagName.toLowerCase() == "a" && 
      element.getAttribute("href").indexOf("#") === 0) {
    element.href = location.href + element.getAttribute("href");
  }
});
<base href="https://example.com/">

<a href="/test">/test</a>
<a href="#test">#test</a>

It also works (unlike the other answers) for dynamically generated (i.e. created with JavaScript) a elements.

2
  • @jor It works fine for me. Which browser are you using? Jul 4, 2016 at 7:04
  • 1
    Firefox 47. I had the hashes concatenated. Try also to open a url that already includes a hash and click on an anchor link; this will append it to the existing hash.
    – jor
    Jul 4, 2016 at 9:09
2

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>
1

To prevent multiple #s in a URL:

document.addEventListener("click", function(event) {
  var element = event.target;
  if (element.tagName.toLowerCase() == "a" &&
    element.getAttribute("href").indexOf("#") === 0) {
    my_href = location.href + element.getAttribute("href");
    my_href = my_href.replace(/#+/g, '#');
    element.href = my_href;
  }
});
1

My approach is to search for all links to an anchor, and prefix them with the document URL.

This only requires JavaScript on the initial page load and preserves browser features like opening links in a new tab. It also and doesn't depend on jQuery, etc.

document.addEventListener('DOMContentLoaded', function() {
  // Get the current URL, removing any fragment
  var documentUrl = document.location.href.replace(/#.*$/, '')

  // Iterate through all links
  var linkEls = document.getElementsByTagName('A')
  for (var linkIndex = 0; linkIndex < linkEls.length; linkIndex++) {
    var linkEl = linkEls[linkIndex]

    // Ignore links that don't begin with #
    if (!linkEl.getAttribute('href').match(/^#/)) {
      continue;
    }

    // Convert to an absolute URL
    linkEl.setAttribute('href', documentUrl + linkEl.getAttribute('href'))
  }
})
0

You can use some JavaScript code inside the tag that links.

<span onclick="javascript:var mytarget=((document.location.href.indexOf('#')==-1)? document.location.href + '#destination_anchor' : document.location.href);document.location.href=mytarget;return false;" style="display:inline-block;border:1px solid;border-radius:0.3rem"
 >Text of link</span>

How does it work when the user clicks?

  1. First it checks if the anchor (#) is already present in the URL. The condition is tested before the "?" sign. This is to avoid the anchor being added twice in the URL if the user clicks again the same link, since the redirection then wouldn't work.
  2. If there is sharp sign (#) in the existing URL, the anchor is appended to it and the result is saved in the mytarget variable. Else, keep the page URL unchanged.
  3. Lastly, go to the (modified or unchanged) URL stored by the mytarget variable.

Instead of <span>, you can also use <div> or even <a> tags. I would suggest avoiding <a> in order to avoid any unwanted redirection if JavaScript is disabled or not working, and emulate the look of your <a> tag with some CSS styling.

If, despite this, you want to use the <a> tag, don't forget adding return false; at the end of the JavaScript code and set the href attribute like this <a onclick="here the JavaScript code;return false;" href="javascript:return false;">...</a>.

0

Building upon Joram van den Boezem's answer, but in plain javascript:

document.addEventListener('DOMContentLoaded', function(){
    let pathname = location.href.split('#')[0];
    [].forEach.call(document.querySelectorAll("a[href^='#']"), function(a) {
        a.href = pathname + a.getAttribute("href");
    });
});
-1

From the example given in the question. To achieve the desired behavior, I do not see the need of using a "base" tag at all.

The page is at http://example.com/foo/

The below code will give the desired behaviour:

<a href="/bar/">bar</a> <!-- Links to "http://example.com/bar/" -->
<a href="#baz">baz</a> <!-- Links to "http://example.com/foo/#baz" -->

The trick is to use "/" at the beginning of string href="/bar/".

1
  • 1
    Some people may need the base tag to build a view library that adapts to use cases, like being run at both root directory and in a subdirectory. Removing the base tag is not a solution.
    – turkinator
    Oct 16, 2020 at 5:46
-2

If you're using Angular 2 or later (and just targeting the web), you can do this:

File component.ts

document = document; // Make document available in template

File component.html

<a [href]="document.location.pathname + '#' + anchorName">Click Here</a>

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.