Html 汉堡图标重置页面上的滚动位置

我为我的web项目复制粘贴了一个汉堡包图标，但由于某种原因，当我单击该图标时，它会卷回顶部。我试图改变边距和填充，但结果总是一样的。我还试图删除汉堡包的动画部分，但仍会向上滚动。有什么不对劲吗

顺便说一句，这里是汉堡图标的链接，我使用的是第一个

HTML

<input type="checkbox" id="checkbox1" class="checkbox1 visuallyHidden" onclick="betterwork()">
        <label for="checkbox1" id="label">
          <div class="hamburger hamburger1">
            <span class="bar bar1"></span>
            <span class="bar bar2"></span>
            <span class="bar bar3"></span>
            <span class="bar bar4"></span>
          </div>
        </label>

---

您选择的汉堡菜单使用隐藏复选框来处理菜单打开和关闭的切换。单击“菜单”按钮时，此复选框处于焦点位置，此焦点会导致滚动到页面顶部

最简单的答案是在css中添加以下内容：

.checkbox1 {
  display: none;
}

---

那我该怎么做才能改变呢？我已经编辑了解决你问题的答案。如果您已经更改了类名，那么在复选框中添加

display:none

应该可以解决这个问题。噢，哇，这确实有效，谢谢！你有很好的动画：）谢谢！但我没有成功。。。感谢罗西·艾尔菲克！

.checkbox1 {
  display: none;
}