internal link to part of html page not working-CodePudding

I can not figure why internal link to a section in an html page are not working... what am I missing?

On the top of the page, I have:

<p>go to <a href="blog/79#maps">maps of our itinerary</a>)</p>

And at the bottom (I also tried name & id alone)

<p><a id="maps" name="maps"></a></p>

You can see it on my blog. When I click on the map link, nothing happens.

CodePudding user response：

You have two <a id="maps" name="maps"></a> in your source code. Please remove one. Id's must be unique.

CodePudding user response：

you should try to call the id in p tag it may work

               <p id='maps'> <a class='maps'></a></p>

CodePudding user response：

The problem is in your href.

To call the an anchor you should not include the URL you are in but rather just the ID of the anchor you want to navigate to.

Change to this:

<a href="#maps">maps of our itinerary</a>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <a href="#maps">Go to Maps</a>
    <div style="height: 500px;"></div>
    <h1 id="maps">
      This is a static template, there is no bundler or bundling involved!
    </h1>
  </body>
</html>

Also, as pointed out above you should not have two IDs with the same key. However this would still work, he would just assume the first ID found so your anchor not working is due to a malformed href and not duplicated IDs.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <a href="#maps">Go to Maps</a>
    <div style="height: 500px;"></div>
    <h1 id="maps">
      ID #1
    </h1>
    <div style="height: 500px;"></div>
    <h1 id="maps">
      ID #2
    </h1>
  </body>
  
</html>

Hope this helps.