I’m working on recreating a CSS Tricks page with the addition of a side-nav, but the scrolling behavior is a little strange and I can’t figure out why. Here’s a link to the Codepen:
https://codepen.io/aemann2/pen/NWRzpdj
I don't know exactly what code to include here since I can't tell where the problem is coming from, but here's the code for the navbar:
<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>
In Chrome and Firefox, whenever you click on one of the links in the side-nav, the page scrolls twice: once so that the top of the main content box meets the top of the page, and again within the content box to pull up the selected section. Safari has similar behavior, just not with smooth-scrolling.
Can someone explain why this is happening? And if possible, how do I get prevent the first scroll, and just have the content within the main content box scroll to the selected section?
