Side-nav 滚动页面两次

问题描述

我正在通过添加侧导航重新创建 CSS 技巧页面，但滚动行为有点奇怪，我不知道为什么。这是 Codepen 的链接：

我不知道要在此处包含哪些代码，因为我无法判断问题出在哪里，但这是导航栏的代码：

<nav id="navbar">
    <a class="nav-link" href="#terminology">terminology</a>
    <h2 class="nav-title">Parent Properties</h2>
    <a class="nav-link" href="#display">display</a>
    <a class="nav-link" href="#flex-direction">flex-direction</a>
    <a class="nav-link" href="#flex-wrap">flex-wrap</a>
    <a class="nav-link" href="#flex-flow">flex-flow</a>
    <a class="nav-link" href="#justify-content">justify-content</a>
    <a class="nav-link" href="#align-items">align-items</a>
    <a class="nav-link" href="#align-content">align-content</a>
    <h2 class="nav-title">Child Properties</h2>
    <a class="nav-link" href="#order">order</a>
    <a class="nav-link" href="#flex-grow">flex-grow</a>
    <a class="nav-link" href="#flex-shrink">flex-shrink</a>
    <a class="nav-link" href="#flex-basis">flex-basis</a>
    <a class="nav-link" href="#flex">flex</a>
    <a class="nav-link" href="#align-self">align-self</a>
</nav>

在 Chrome 和 Firefox 中，每当您单击侧边导航中的某个链接时，页面会滚动两次：一次使主要内容框的顶部与页面顶部相交，另一次在内容框中拉出所选部分。 Safari 也有类似的行为，只是没有平滑滚动。

有人可以解释为什么会发生这种情况吗？如果可能的话，如何阻止第一次滚动，并让主内容框中的内容滚动到所选部分？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）