同一页面内的链接

Question

I am linking the table of content with the heading of a section in the same page. However, when the screen scrolls down to the desired section the actual linked heading gets lost under the navigation bar which is kept as fixed. It is working fine on the mobile preview. Having issue with the desktop. Following is the code i am using :

<div class="content uk-width-1-2@l uk-width-1-1@m uk-width-1-1@s">
  <span class="anchor" id="Overview"></span>
  <h2>Overview</h2>
  <p> As a very high-level summary:</p>
  <ul>
    <li>
      Companu has strong application, network and infrastructure-level
      security controls in place to ensure your data is safely stored
      and processed <br /><br />
    </li>
    <li>
      Company serves multiple tenants from the same application codebase,
      but uses effective isolation techniques to keep tenant data separate
      <br /><br />
    </li>
    <li>
      Privacy laws, which are broadly compatible with many other jurisdictions
      (for example, we support the rights of access and rectification
      for data subjects) <br/><br/>
    </li>
    <li>Comapny is hosted on AWS, in multiple regions, using VPC <br /><br /></li>
  </ul>
  <p>
    You'll find more information on each of these points
    in the detailed chapters documents below.
  </p>
</div>

.anchor {
  display: block;
  height: 63px;
  /* this is the height of your header */
  margin-top: -63px;
  /* this is again negative value of the height of your header */
  visibility: hidden;
}

Can anyone please help to sort this problem.

Answer 1

A common way is to add an invisible pseudo element to the original target element of the links via CSS, like this:

#Overview::before { 
  display: block; 
  content: " "; 
  margin-top: -63px; 
  height: 63px; 
  visibility: hidden; 
}

This will "extend" the element with that ID in a way which causes the anchor to be 63px above the main element (can be any value), without causing any other visible changes.

Note: I would assign the Overview ID directly to the h2 element, not to an extra span

Here it is in a snippet example:

 html, body { margin: 0; } .header { position: fixed; width: 100%; height: 60px; top: 0; left: 0; background: #d75; } .something_in_between { height: 500px; background: #75f; padding-top: 70px; } #Overview { background: yellow; height: 500px; } #Overview::before { display: block; content: " "; margin-top: -63px; height: 63px; visibility: hidden; } 

 <div class="header">Fixed Header</div> <div class="something_in_between">Here's the <a href="#Overview">LINK</a> to the "Overview" element</div> <div id="Overview">This should be visible when clicking the link</div>