How to scroll to HTML id tag with an additional space (fixed header)?

Question

On a page of my article I've got a table of contents and every of its points links to a specific header by the anchor's href "#" directive. However, I'm using a fixed header (I mean a main nav header on a top of a layout), so when I click a table's point, a browser scrolls to article's header, but it's covered by navigation header.
Is it possible to set some CSS property, which tells a browser to "stop 30px before this element"?

Thanks in advance, front-end is not my advantage. Also I couldn't find the solution for my problem. If it's not possible, I will use the JavaScript.

have you tried any? could you post your code so we can go on ? — Burham B. Soliman, Feb 15 '21 at 20:24
I've tried "scroll-margin-top", but no effect. Same with a padding. What code do you want to see? It's a lot of it. — VG-Electronics, Feb 15 '21 at 20:50
Does this answer your question? [offsetting an html anchor to adjust for fixed header](https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header) — pretzelhammer, Feb 15 '21 at 21:04

score 6 · Accepted Answer · answered Feb 15 '21 at 21:06

ok try this snippet with scroll-margin-top, it could help you

body {
  margin: 0 auto;
  width: 100%;
}

.navbar {
  background-color: #ffffff;
  position: fixed;
  display:block;
  width:100%;
  top: 0;
  margin-bottom:2.5rem
}
.links:first-of-type {
margin-top:5.2rem;
}
.links {
  color: #ffffff;
  height: 100vh;
  margin: 0;
  background-color: powderblue;
  border: 1px solid black;
  text-align:center;
  font-size:3rem;
  scroll-margin-top: 5.2rem;
}

.list-inline {
  list-style: none;
  padding: 1rem;
  text-align:center;
}

.list-inline>li {
  display: inline-block;
text-align:center;
}

<nav class="navbar">
  <ul class="list-inline">
    <li><a href="#first">Link (1)</a></li>
    <li><a href="#second">Link (2)</a></li>
    <li><a href="#third">Link (3)</a></li>
    <li><a href="#fourth">Link (4)</a></li>
  </ul>
</nav>

<div>
  <div class="links" id="first">Link (1)</div>
  <div class="links" id="second">Link (2)</div>
  <div class="links" id="third">Link (3)</div>
  <div class="links" id="fourth">Link (4)</div>
</div>

"scroll-margin-top" works fine, I made some mistake before while checking it. Actually, I realized it a few seconds before this answer, but take it as accepted :) — VG-Electronics, Feb 15 '21 at 21:10

How to scroll to HTML id tag with an additional space (fixed header)?

1 Answers1