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

Julia 👩🏻‍💻 GDE - Nov 5 '21 - - Dev Community

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.

Preview of the problem

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;
}
Enter fullscreen mode Exit fullscreen mode
<!-- index.html -->

<section id="section-id">
  <div>
    CONTENT
  </div>
</section>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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


Thank you

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

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .