javascript - 使用 div 的 anchor 标记设置偏移量

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

偏移 anchor 哈希标签链接以调整固定标题

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; 
}