Webflow.js stops #anchor links working correctly

Design help Custom code
1

A simple snap scroll css code along with #anchor links will not work in Webflow, it only works if I export the code and remove Webflow.js from the document:

  <nav>
    <ul>
      <li><a href="#section-2">section 2</a></li>
      <li><a href="#section-3">section 3</a></li>
      <li><a href="#section-4">section 4</a></li>
    </ul>
  </nav>
 
  <main>
    <section id="section-1" class="one">
    </section>
    <section id="section-2" class="two">
    </section>
    <section id="section-3" class="three">
    </section>
    <section id="section-4" class="four">
    </section>
  </main>

CSS:

/* html {
    scroll-behavior: smooth;
} */

main {
  height: 100vh;
  overflow: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

section {
  height: 100vh;
  scroll-snap-align: start;
}

nav {
  position: fixed;
  top: 0;
  color: white;
  width: 100%;
}

li {
  display: inline-block;
  list-style-type: none;
}

a:visited {
  color: white;
}


.one {
  background-color: red;
}

.two {
  background-color: blue;
}

.three {
  background-color: grey;
}

.four {
  background-color: green;
}

This is the line I have to remove from HTML for the above to work.

<script src="js/webflow.js" type="text/javascript"></script>