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

user_11697387 0
Viewed 853

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.

css html
1 Answers

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>

user_81340140
Related