Javascript 如何防止锚定标签菜单在菜单打开或关闭时跳到页面顶部？

我有一个使用锚定标签的导航菜单。我正在制作一个单页网站，但手机菜单上的导航会滚动到该部分，然后在我打开或关闭它时会一直跳回到顶部。我尝试返回false和preventDefault，但没有任何效果。我已经阅读了许多其他类似的问题，但没有一个答案适用于这段代码。我所有的部分都与我发布的部分相同。我知道这一定是个简单的答案，但我有个障碍。提前谢谢你

        <nav>
            <ul id="mySidenav" class="sidenav">
                <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
                <li><a class="nav-link" href="#home">Home</a></li>
                <li><a class="nav-link" href="#projects">Projects</a></li>
                <li><a class="nav-link" href="#blog">Blog</a></li>
                <li><a class="nav-link" href="#bio">About the Developer</a></li>
                <li><a class="nav-link" href="#contact">Contact</a></li>
            </ul>
        </nav>
        
    <div class="home" id="main">
        <span style="font-size:30px;cursor:pointer" onclick="openNav()"><i class="fas fa-bars"></i></span>
        <h1>This is the content.</h1>
        <section id="home">
            <h2>Home</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus ultricies leo hendrerit fringilla. Donec vestibulum ut arcu eget porttitor. Sed eget dictum diam. Pellentesque et libero vitae eros molestie accumsan. Quisque ante sem, tristique vitae justo eget, rhoncus dictum ipsum. Suspendisse gravida volutpat justo, non auctor quam feugiat id. Aenean dapibus eget sem sit amet rhoncus. Nulla facilisi. Aliquam erat volutpat. Suspendisse ac ex diam.</p>
        </section>

---

您能包含应用于这些元素的CSS吗？所以上面提供的代码可以在测试时工作。更新它！非常感谢。

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
    return false;
}


let mainNavLinks = document.querySelectorAll("nav ul li a");
let mainSections = document.querySelectorAll("main section");

let lastId;
let cur = [];

window.addEventListener("scroll", event => {
   let fromTop = window.scrollY;

  mainNavLinks.forEach(link => {
    let section = document.querySelector(link.hash);

    if (
  section.offsetTop <= fromTop &&
  section.offsetTop + section.offsetHeight > fromTop
) {
  link.classList.add("current");
} else {
  link.classList.remove("current");
}
  });
});

@media only screen and (max-width: 768px) {

body {
    display: block;
}

header {
    grid-column: 1 / 3;
    width: 95vw;
    height: 50vh;
}

header img {
    max-height: 50vh;
}

.hamburger {
    position: sticky;
    top: 0;
}

.sidenav {
    height: 100vh;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #213c50;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

nav ul {
    text-decoration: none;
    list-style: none;
    font-size: 25px; 
    transition: 0.3s;
    padding-inline-start: 0;
}

nav ul li a {
    background-color: #213c50;
    color: #fff;
    text-decoration: none;
}

.closebtn {
    position: absolute;
    size: 20px;
    margin-left: 200px;
}

#main {
    padding: 1rem;
}

#main h1, h2, p {
    padding-bottom: 2rem;
    transition: margin-left .5s;
    padding-left: 3rem;
}

section {
    padding: 2rem;
    padding: bottom 20rem;
    margin: 0 0 3rem 0;
}

#home {
    min-height: 50vh;
    color: #fff;
    background-color: #213c50;
}

#projects {
    min-height: 50vh;
    color: #000;
    background-color: #fb806f;
}

#blog {
    min-height: 50vh;
    color: #000;
    background-color: #53a181;
}

#bio {
    min-height: 50vh;
    color: #000;
    background-color: #fb806f;
}

#contact {
    min-height: 50vh;
    color: #fff;
    background-color: #213c50;
}
}