使用div的锚标签设置偏移量

Question

我创建了一个单页，其中包含一个导航栏，并且链接指向页面中的节ID。

然而，当我点击链接时，页面的部分向下滚动直到该部分的顶部，由于我的粘性导航栏，我的部分的顶部就在它后面。

如何创建一个与我的导航栏高度匹配的偏移高度，以便在正确的位置显示div？

以下是我正在发生的事情的截图。

此外，有没有办法顺利滚动到该部分？实现这一目标的最简单方法是什么？

我的示例代码：

HTML：

<nav>
  <ul>
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Sction 2</a></li>
    <li><a href="#section3">Section 3</a></li>
  </ul>
</nav>


<div id="section1">Section 1</div>
<div id="section2">Section 2</div>
<div id="section3">Section 3</div> 

Answer 1

抵消锚点哈希标记链接以调整固定标题

HTML：

<a href="#section1">Goto Section I</a>

<!-- Some more content -->


<h3 id="section1" class="offset">Section I</h3>

<p>Section specific content</p>

CSS：

.offset:before { 
    display: block; 
    content: " "; 
    height: 150px;      /* Give height of your fixed element */
        margin-top: -150px; /* Give negative margin of your fixed element */    
        visibility: hidden; 
}

Answer 2

将padding-top提供给等于header height的那个部分。就像您的标头有height: 40px一样，然后将padding-top: 40px提供给该部分。

请看下面的代码段：

＆＃13;

＆＃13;

body {
  margin: 0;
  padding-top: 50px;
}

nav {
  background: #eee;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

li {
  padding: 15px;
}

.sec {
  height: 200px;
  margin-bottom: 30px;
  background: #ff0;
  padding-top: 48px;
}

＆＃13;

<nav>
  <ul>
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
  </ul>
</nav>


<div id="section1" class="sec">Section 1</div>
<div id="section2" class="sec">Section 2</div>
<div id="section3" class="sec">Section 3</div> 

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！