Javascript 展开导航强制滚动至打开时的顶部

我对编码和javascript非常陌生，我一直在尝试创建一个导航块，当我单击左上角的徽标时，它会从左侧滑入

我似乎已经让导航的滑入和滑出元素工作得很好，但是，如果我向下滚动页面并再次尝试打开导航，浏览器窗口将跳回页面顶部，而不是停留在原来的位置。奇怪的是，当我关闭导航时，它没有这样做，只是打开它

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

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

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

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

提前谢谢

编辑：这里也是相关的HTML

---

您的代码工作正常。确保正确触发功能

例如，使用链接

a

，href属性链接到javascript函数

<a href="javascript:openNav()">Open</a><br>
<a href="javascript:closeNav()">Close</a><br>

<div id="expanded-menu" class="expanded-menu">
  My menu.
</div>
Some Content.

JS

---

你的代码可以工作。确保正确触发功能

例如，使用链接

a

，href属性链接到javascript函数

<a href="javascript:openNav()">Open</a><br>
<a href="javascript:closeNav()">Close</a><br>

<div id="expanded-menu" class="expanded-menu">
  My menu.
</div>
Some Content.

JS

---

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

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

函数foo（e）{ e、 预防默认值（） console.log（'foo'）； }

---

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

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

函数foo（e）{ e、 预防默认值（） console.log（'foo'）； }

---

您如何确定是调用

openNav

还是

closeNav

？你能为你的徽标添加HTML吗？关于动画本身，请查看以下博文：。简而言之，您需要为不同的CSS属性设置动画，而不是

显示

，以实现所需的动画效果。您是否使用锚定标记（

）作为导航触发器？对于动画效果的转换，请考虑除<代码>显示> <代码>之外的其他方法，可能是<>代码>左< /代码> /<代码>右<代码> > <代码>不透明度> /代码>和<代码>转换< /代码>您如何确定是否调用<代码> OpenNav<<代码>或<代码> CuttoEnA< <代码>？你能为你的徽标添加HTML吗？关于动画本身，请查看以下博文：。简而言之，您需要为不同的CSS属性设置动画，而不是

显示

，以实现所需的动画效果。您是否使用锚定标记（

）作为导航触发器？对于动画效果的转换，考虑除<代码>显示> <代码>之外的另一种方法，可能是<>代码>左 > />代码>右< /代码>，<代码>不透明度和<代码>转换< /代码>谢谢。我编辑了这个问题，是的，我将链接到属性。关于为什么每次单击打开菜单时浏览器都会自动滚动到顶部，有什么想法吗？谢谢我编辑了问题，是的，我正在将链接链接到属性。你知道为什么每次点击打开菜单时浏览器都会自动滚动到顶部吗？

width: 230px;
left: -230px;
transition: left 1s;

function openNav() {
     document.getElementById("expanded-menu").style.left = "0px";
}

function closeNav() { 
    document.getElementById("expanded-menu").style.left = "-230px";
}