如何使我的锚标签菜单在打开或关闭菜单时不会跳转到页面顶部？

问题描述

我有一个使用锚标记的导航菜单。我正在制作一个一页的网站，但是移动菜单上的导航滚动到该部分，然后在打开或关闭它时一直跳回到顶部。我尝试过返回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>

---

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

更新：

它与脚本，固定属性或锚标记有关。我不知道如何在打开和关闭移动设备菜单时避免页面跳动。我已经研究了几个小时，并且感到非常沮丧。

CSS：

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

解决方法

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

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

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