Search code examples
javascripthtmlcssanchorhref

Anchor tag behavior is inconsistent between different heading types

In the example below, clicking on the "Home" or "About" headings will properly jump to those sections. However, clicking "Sample Title" and "Sample Title 2" will have no effect. How can I make it so that clicking the sample titles will allow the user to properly jump to those sections.

All help is greatly appreciated, thank you. 

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
body {
  margin: 0;
}

.topnav {
  overflow: hidden;
  background-color: #000;
  position: fixed;
  top: 0;
  width: 100%;
  text-align: center;
  z-index: 10;
}

.topnav a {
  display: inline-block;
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: fixed;
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

.section {
  position: relative;
}

.anchor {
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  z-index: -1;
  top: -50px;
  left: 0;
  visibility: hidden;
}

p{
height: 200px;
}
<!DOCTYPE html>
<html lang="en">

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<title>title</title>

<body>

  <div class="topnav" id="myTopnav">
    <a href="#home" onclick="myFunction()" class="active">Home</a>
    <a href="#about" onclick="myFunction()">About</a>
    <a href="#contact" onclick="myFunction()">Contact</a>
    <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
  </div>

  <div class="w3-row-padding" style="max-width: 50em;margin: auto; margin-top: 50px;">
    <hr style="margin-left: 10px; margin-right:10px">

    <div class="w3-full section" style="margin-left: 10px; margin-right:10px">
      <span id="home" class="anchor"></span>
      <h1 style="margin-bottom:0px;"><a href="#home">Home</a></h1>
      <p>This is a paragraph with large height.</p>
    </div>

    <div class="w3-full section" style="margin-left: 10px; margin-right:10px">
      <span id="about" class="anchor"></span>
      <h1><a href="#about">About</a></h1>
      <span id="1" class="anchor"></span>
      <h3 style="margin-bottom:0px;"><a href="#1">Sample Title</a></h3>

      <p>This is a paragraph with large height.</p>

      <span id="2" class="anchor"></span>
      <h3 style="margin-bottom:0px;"><a href="#2">Sample Title 2</a></h3>

      <p>This is a paragraph with large height.</p>

    </div>

    <div class="w3-full section" style="margin-left: 10px; margin-right:10px">
      <span id="contact" class="anchor"></span>
      <h1><a href="#contact">Contact</a></h1>

      <p>This is a paragraph with large height.</p>

    </div>
  </div>
</body>

</html>

Solution

  • The position:absolute of your anchor is messing with its position; change it to relative.

    function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
    span.anchor {
  position: relative;
}

body {
  margin: 0;
}

.topnav {
  overflow: hidden;
  background-color: #000;
  position: fixed;
  top: 0;
  width: 100%;
  text-align: center;
  z-index: 10;
}

.topnav a {
  display: inline-block;
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: fixed;
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

.section {
  position: relative;
}

.anchor {
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  z-index: -1;
  top: -50px;
  left: 0;
  visibility: hidden;
}
    <div class="topnav" id="myTopnav">
  <a href="#home" onclick="myFunction()" class="active">Home</a>
  <a href="#about" onclick="myFunction()">About</a>
  <a href="#contact" onclick="myFunction()">Contact</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>

<div class="w3-row-padding" style="max-width: 50em;margin: auto; margin-top: 50px;">
  <hr style="margin-left: 10px; margin-right:10px">

  <div class="w3-full section" style="margin-left: 10px; margin-right:10px">
    <span id="home" class="anchor"></span>
    <h1 style="margin-bottom:0px;"><a href="#home">Home</a></h1>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
  </div>

  <div class="w3-full section" style="margin-left: 10px; margin-right:10px">
    <span id="about" class="anchor"></span>
    <h1><a href="#about">About</a></h1>
    <span id="1" class="anchor"></span>
    <h3 style="margin-bottom:0px;"><a href="#1">Sample Title</a></h3>

    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>

    <span id="2" class="anchor"></span>
    <h3 style="margin-bottom:0px;"><a href="#2">Sample Title 2</a></h3>

    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>

  </div>

  <div class="w3-full section" style="margin-left: 10px; margin-right:10px">
    <span id="contact" class="anchor"></span>
    <h1><a href="#contact">Contact</a></h1>

    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>

    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>

  </div>


</div>