How To Not Cut Off The Top Of Your Section When Using Anchor Tags

When I created my personal portfolio, I used anchor tags in my sticky navigation bar to make it easy for readers to jump directly to the section they were interested in. But when working with a sticky navigation bar, the top of each section was cut off by the height of the navigation bar.

NEW APPROACH

Here's how I solved this problem

Add the scroll-margin-top property to the section and set the value equal to the height of the header.

/* style.css */

nav-bar {
  height: 20vh;
}

.section-id {
  scroll-margin-top: 20vh;
}

<!-- index.html -->

<section id="section-id">
  <div>
    CONTENT
  </div>
</section>

OLD APPROACH
Create an anchor tag directly under each section, give it a class, and add the following properties to it:

/* style.css */

nav-bar {
  height: 20vh;
}

.anchor {
  display: block;
  position: relative;
  top: -20px; /* this is your offset */
  visibility: hidden;
}

The offset depends on the height of your navigation bar.

Your sections in your HTML file should look like this:

<!-- index.html -->

<section id="section-id">
  <a class="anchor" id="anchor-id"></a>
  <div>
    CONTENT
  </div>
</section>

If you want to take a look at my website 👉 https://julia-undeutsch.netlify.app/

---

Thanks for your reading and time. I really appreciate it!

Comments

[François CHAUSSIN]

This solution is great, but do you know the scroll-margin-top property? It is working according to your nav-bar height when on position: sticky. And solve the problem in a more consistent way.
Cheers

[Julia 👩🏻‍💻 GDE]

Thank you. I will update the article immediately :)