javascript - 展开导航强制滚动到打开时的顶部

Question

我对编码和 JavaScript 很陌生，我一直在尝试创建一个导航 block ，当我单击左上角的 Logo 时，该导航 block 会从左侧滑入。

我似乎已经让导航的滑入和滑出元素工作正常，但是，如果我进一步向下滚动页面并尝试再次打开导航，浏览器窗口会跳回到页面顶部，而不是留在原地。奇怪的是，当我关闭导航栏时它不会执行此操作，只需打开它即可。

这是我在 HTML 顶部使用的脚本来控制导航打开和关闭:

 <script>
      function openNav() {
        document.getElementById("expanded-menu").style.display = "block";
      }

      function closeNav() {
        document.getElementById("expanded-menu").style.display = "none";
      }
    </script>

这是扩展导航的 CSS 样式:

.expanded-menu {
  background-color: #f3f3f3;
  height: 100vh;
  position: fixed;
  display: none;
  width: 230px;
  text-align: center;
  z-index: 100;
  overflow-x: hidden;
  animation: animateleft 0.4s;
  top: 0;
  left: 0;
}

我在那里的动画效果似乎也不起作用。它只是跳出而不是滑动。但我想我需要为此提出另一个问题。

提前致谢!

编辑:这也是相关的 HTML。

<div class="expanded-menu" id="expanded-menu">
        <!-- MENU -->
          <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">
            <img src="images/Backarrow.png">
          </a>

还有...

<div class="contracted-menu">
        <a href="#" onclick="openNav()">
          <img src="images/nav icons/Cuttsy.png"  class="cuttsy-small" alt="Cuttsy logo">
        </a>

Answer 1

您需要禁用默认操作，您可以使用下面演示的 PreventDefault 方法或使用 javascript:void(0)，就像您在示例中使用的那样。

您刚刚使用了“#”的工作链接。通常，如果与某些现有 ID 一起使用，它会滚动到该 ID，但如果为空，它只会滚动到顶部。

function foo(e) {
  e.preventDefault()
  console.log('foo');
}

<a href="#" onclick="foo(event)">xxx</a>