html - 如何使用额外的空间(固定标题)滚动到 HTML id 标签？

Question

在我文章的一页上，我有一个目录，它的每个点都通过 anchor 的 href“#”指令链接到特定的标题。但是，我使用的是固定标题(我的意思是布局顶部的主导航标题)，因此当我单击表格的点时，浏览器会滚动到文章的标题，但它被导航标题覆盖。
是否可以设置一些 CSS 属性，告诉浏览器“在此元素之前停止 30px”？

在此先感谢，前端不是我的优势。我也找不到解决我问题的方法。如果不可能，我将使用 JavaScript。

Answer 1

好的，试试这个带有 scroll-margin-top 的片段，它可以帮助你

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>