為什么我打開固定導航菜單時 go 到頁面頂部？

Question

我有一個高度為 100% 的固定側導航菜單。 當您單擊角落的漢堡包時，其寬度將設置為 15%-100%，具體取決於您的窗口大小。 當您單擊 x 時，它的寬度設置為 0。百分比是相對於主體設置的。 在我添加內容以便可以滾動之前，這似乎工作得很好。 當您向下滾動然后打開/關閉側導航時，它會將您帶回頁面頂部。

我對 JavaScript 不是很熟悉，所以那里可能有問題。 我搜索了 Google 和 StackOverflow，但沒有找到任何東西。 我可能沒有在尋找正確的問題。 我嘗試將所有百分比更改為 vh 和 vw 並沒有改變。 我也不認為這是瀏覽器問題（我使用 Chrome），因為我也在 Microsoft 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-->

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

任何幫助是極大的贊賞！

Answer 1

您需要防止鏈接的默認行為 attr href="#" 或刪除 href https://www.w3schools.com/jsref/event_preventdefault.asp

Answer 2

如果您需要交互式元素，但不需要href屬性，請改用<button>元素並為此元素應用所需的 CSS。 這是可訪問性問題的更好選擇。

為什么我打開固定導航菜單時 go 到頁面頂部？

問題描述

2 個解決方案

解決方案1
0 2019-11-09 17:16:18

解決方案2
0 已采納 2019-11-09 19:17:22

為什么我打開固定導航菜單時 go 到頁面頂部？

問題描述

2 個解決方案

解決方案1 0 2019-11-09 17:16:18

解決方案2 0 已采納 2019-11-09 19:17:22

解決方案1
0 2019-11-09 17:16:18

解決方案2
0 已采納 2019-11-09 19:17:22