Javascript 当我打开固定导航菜单时，为什么要转到页面顶部？_Javascript_Html_Css

Javascript 当我打开固定导航菜单时，为什么要转到页面顶部？

javascript html css

Javascript 当我打开固定导航菜单时，为什么要转到页面顶部？,javascript,html,css,Javascript,Html,Css,我有一个固定侧导航菜单，高度为100%。当你点击角落里的汉堡时，它的宽度会根据窗口的大小设置为15%-100%。单击x时，其宽度设置为0。百分比是相对于主体设置的。在我添加内容以便可以滚动之前，这似乎工作得很好。当您向下滚动，然后打开/关闭侧导航时，它会将您带回页面顶部我对JavaScript不是很熟悉，所以可能有问题。我搜索了谷歌和StackOverflow，但什么也没找到。我可能没有找到正确的问题。我试着把所有的百分比都改成vh和vw，但没有任何改变。我也不认为这是一个浏览器问题（我使用C

我有一个固定侧导航菜单，高度为100%。当你点击角落里的汉堡时，它的宽度会根据窗口的大小设置为15%-100%。单击x时，其宽度设置为0。百分比是相对于主体设置的。在我添加内容以便可以滚动之前，这似乎工作得很好。当您向下滚动，然后打开/关闭侧导航时，它会将您带回页面顶部

我对JavaScript不是很熟悉，所以可能有问题。我搜索了谷歌和StackOverflow，但什么也没找到。我可能没有找到正确的问题。我试着把所有的百分比都改成vh和vw，但没有任何改变。我也不认为这是一个浏览器问题（我使用Chrome），因为我在微软的Edge上也尝试过，结果也一样

<body onresize="WindowResize()">
<!--side-menu-->
  <nav class="navbar">
    <span class="open-Slide">
      <a href="#" onclick="openSlideMenu()">
        <span id="hamburger" class="icon-menu"></span> /*an Icon font I have downloaded*/
      </a>
    </span>
    <div id="side-menu">
      <a href="#" class="btn-close" onclick="closeSlideMenu()">&times;</a>
      <a href="#">Home</a>
      <a href="#">Portfolio</a>
      <a href="#">Blog</a>
    </div>
  </nav>
<!--end of side-menu-->

非常感谢您的帮助

您需要防止使用attr href=“#”或remove href”链接的默认行为

如果您需要交互式元素，但不需要

href

属性，请使用

元素，并为此元素应用所需的CSS。从可访问性的角度来看，这是一个更好的选择

如果您需要交互式元素，但不需要

href

属性，请使用

元素，并为此元素应用所需的CSS。从可访问性的角度来看，这是一个更好的选择

从中删除href属性而不是使用

元素，单击此按钮时使用

button

元素并调用

openSideMenu（）

函数。从中删除href属性而不是使用

元素，使用

button

元素并调用

openSideMenu（）

单击此按钮时的功能。

    //side-menu script
    var sideMenuWidth;
    var sideMenuIsActive = true;
    window.onload = function() {
      if (window.innerWidth > 1143) {
        sideMenuWidth = '15%';
      }else{
        sideMenuWidth = '100%';
      }
    }
    function openSlideMenu () {
      document.getElementById('side-menu').style.width = sideMenuWidth;
        sideMenuIsActive = true;
    }
    function windowResize() {
      if (window.innerWidth > 1143) {
        sideMenuWidth = '15%';
        if (sideMenuIsActive == true) {
          document.getElementById('side-menu').style.width = sideMenuWidth;
        }
      }else{
        sideMenuWidth = '100%';
        if (sideMenuIsActive == true) {
        document.getElementById('side-menu').style.width = sideMenuWidth;
        }
      }
    }
    function closeSlideMenu() {
      document.getElementById('side-menu').style.width = '0';
      sideMenuIsActive = false;
    }
  //end of side-menu script

#side-menu {
  width:15%;
  z-index: 1;
  transition: 0.5s;
  top:0;
  left:0;
  background-color: black;
  height: 100%;
  position: fixed;
}

#hamburger {
  display: absolute;
  top: 0;
  left:0;
  margin: 1rem 0 0 1rem;
  position: fixed;
  color: black;
}