Search code examples
htmlhyperlinkanchormarkup

Unexpected html anchor redirection

I'm currently developing a large project (and I don't know the whole codebase in detail), and I just stumbled upon something I can't understand and hopefully someone can add some advise.

In my project we use a "to top"-anchor to easily get from bottom to top (nothing special). But for some reasons, it won't work like I expect. Imagine an URL like: http://example.com/foo and the following html:

<header id="top">top</header>
<div style="height: 2000px"></div>
<a href="#top">Click me</a>

In theory this works fine and heads to http://example.com/foo#top without reloading the site, but on my project it will redirect to http://example.com/#top.

I can't see any EventListener made by Javascript which may intercept the click event. Does anyone got some hints for me which might be wrong (or I just miss)?

Solution

  • Thanks to @AmrElgarhy, I'll leave an answer to my own question here.

    It's because of the <base> element in my HTML code. For my solution I can't delete this node, but I'm going to add the request-uri to my "to-top"-anchor programmatically like this:

    <header id="top">top</header>
<div style="height: 2000px"></div>
<a href="{{ request.uri }}#top">Click me</a>

    Whereas {{ request.uri }} will contain /foo or similar.