How do I make a link jump to the correct part of another page?

Question

I've made a link to jump to a part of another page using the following HTML:

<a href="./about-us.html#our-mission"> Read more &#187;</a>

This is the id of the link where it goes to:

<div id="our-mission" name="our-mission">

The problem is that it is dropping me a few lines down from the heading "Our Mission" on the targeted page.

How do I get it to target the correct spot, please? Tnx.

Answer 1

Try adding this to your CSS file:

    #our-mission {padding-top:3%;}

Adjust percentage as needed.

Answer 2

I guess you need to set an offset. You sould try something like this:

https://css-tricks.com/hash-tag-links-padding/

offsetting an html anchor to adjust for fixed header

This could be a solution for your problem but i need a code example for an concrete solution. the ::before pseudo class is the key.

body {
  margin:0;
}
nav {
  background: yellow;
  height: 80px;
  top:0;
  position: fixed;
  width: 100%;
}
.spacer{
  height: 80px;
}
.content{
  height: 1000px;
  width:100%;
  margin:0;
  padding:0;
}
#green {
  background: green;
}
#red {
  background: red;
}
h1 {
  margin:0;
}
h1::before { 
  display: block; 
  content: " "; 
  margin-top: -80px; 
  height: 80px;
  pointer-events: none;
}

<nav>
<ul>
  <li>
    <a href="#green">Green</a> 
  </li>
  <li>
    <a href="#red">Red</a>
  </li>
</ul>
  
</nav>

<div class="spacer">
</div>
<div class="content" id="green">
<h1>Green</h1>
</div>
<div class="content" id="red">
<h1>RED</h1>
</div>