Pure CSS to achieve the internal anchor point of the web page when the up and down offset code example

Recently, when I was working on my "Football Navigation" website, I encountered a requirement to shift the internal anchor of a web page downward a little after jumping to avoid being covered by the top fixed navigation bar.

I searched for some methods online, and most of them used js to control the jump. Later, I found a method that was implemented only with CSS on a foreign developer's personal blog. I thought it was very simple, so I translated his implementation method over. Usually the style of the fixed navigation bar at the top of our web page is implemented as follows:

<div class="header" style="position: fixed; top: 0;"></div>

Afterwards, there will be a list of a links to jump to:

<ul>
  <li><a href="#section1">Anchor Text</a></li>
  <li><a href="#section2">Anchor Text</a></li>
</ul>

The requirement is that when each a link above is clicked, the page is located at the anchor position of the corresponding id:

<div class="section" id="section1"></div>
<div class="section" id="section2"></div>

However, if there is a div with position:fixed at the top, when positioning to this anchor point, the upper part of the content in the anchor point will be covered by the div fixed at the top. The solution is to add an empty page anchor at each positioned content, put the page element ID to be jumped to this empty element, and set the CSS familiarity of the empty element to achieve the offset when jumping. The empty element we define is the div with the class anchor, and the div's id is set to the id that the a link above wants to jump to:

<div class="anchor" id="section1"></div>
<div class="section"></div>
<div class="anchor" id="section2"></div>
<div class="section"></div>

The CSS properties of this empty element are as follows:

.anchor{
  display: block;
  height: 60px; /*same height as top fix*/
  margin-top: -60px; /*same height as top fix*/
  visibility: hidden;
}

At this point, we have realized the function of internal anchor point jump that we want.

In short, the offset value here is the height occupied by the empty element when jumping. This placeholder element is used to achieve the offset effect we need when the anchor point jumps.

This concludes this article about pure CSS to achieve internal anchor point jump up and down offset example code introduction, for more CSS internal anchor point jump up and down offset content, please search 123WORDPRESS.COM previous articles or continue to browse the following related articles, I hope you will support 123WORDPRESS.COM in the future!