单击菜单图标使页面跳回顶部

Question

首先 post 这里。对不起，如果我犯了愚蠢的错误。但我遇到的问题是，每当我单击汉堡图标时，页面都会跳回顶部。当菜单从右侧滑动时，我真的希望页面停留在用户所在的位置。我不知道我是否以最有效的方式处理这个汉堡菜单。

任何建议都会很棒

提前致谢

function openSlideMenu(){
    document.getElementById('menu').style.width = '250px';
    document.getElementById('content').style.marginRight = '250px';
}

function closeSlideMenu(){
    document.getElementById('menu').style.width = '0';
    document.getElementById('content').style.marginRight = '0';
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  background-color: #000;
  color: #fff;
  padding: 1rem;
}

.nav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #000;
  overflow-x: hidden;
  padding-top: 60px;
  transition: 0.7s;
}

.nav a {
  display: block;
  padding: 20px 30px;
  font-size: 20px;
  text-decoration: none;
  color: #ccc;
}

.nav a:hover {
  color: #fff;
  transition: 0.4s;
}

.nav .close {
  position: absolute;
  top: 0;
  right: 0;
}

.slide a {
  color: #fff;
  position: absolute;
  top: 10px;
  right: 10px;
}

.slide a .menu {
  padding-left: 0.4rem;
}

.overlay {
  background-color: #000;
  z-index: 5;
}

<body>
    <div class="overlay">
      <header id="content">
        <div class="logo">Industrious</div>
        <nav>
          <span class="slide">
            <a href="#" onclick="openSlideMenu()">
              <i class="fas fa-bars"></i><span class="menu">Menu</span>
            </a>
          </span>

          <div id="menu" class="nav">
            <a href="#" class="close" onclick="closeSlideMenu()">
              <i class="fas fa-times"></i>
            </a>
            <a href="#">Home</a>
            <a href="#">Elements</a>
            <a href="#">Generic</a>
          </div>
        </nav>
      </header>
    </div>

Answer 1

您必须阻止默认事件的发生。有两种方法可以做到这一点。一种简单的方法是 href 到 javascript:;.

function openSlideMenu() {
  document.getElementById('menu').style.width = '250px';
  document.getElementById('content').style.marginRight = '250px';
}

function closeSlideMenu() {
  document.getElementById('menu').style.width = '0';
  document.getElementById('content').style.marginRight = '0';
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  background-color: #000;
  color: #fff;
  padding: 1rem;
}

.nav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #000;
  overflow-x: hidden;
  padding-top: 60px;
  transition: 0.7s;
}

.nav a {
  display: block;
  padding: 20px 30px;
  font-size: 20px;
  text-decoration: none;
  color: #ccc;
}

.nav a:hover {
  color: #fff;
  transition: 0.4s;
}

.nav .close {
  position: absolute;
  top: 0;
  right: 0;
}

.slide a {
  color: #fff;
  position: absolute;
  top: 10px;
  right: 10px;
}

.slide a .menu {
  padding-left: 0.4rem;
}

.overlay {
  background-color: #000;
  z-index: 5;
}

<div class="overlay">
  <header id="content">
    <div class="logo">Industrious</div>
    <nav>
      <span class="slide">
        <a href="javascript:;" onclick="openSlideMenu()">
          <i class="fas fa-bars"></i>
          <span class="menu">Menu</span>
        </a>
      </span>

      <div id="menu" class="nav">
        <a href="javascript:;" class="close" onclick="closeSlideMenu()">
          <i class="fas fa-times"></i>
        </a>
        <a href="#">Home</a>
        <a href="#">Elements</a>
        <a href="#">Generic</a>
      </div>
    </nav>
  </header>
</div>

第二种也是正确的方法是event.preventDefault()。如果您使用的是不显眼的事件侦听器，则可以执行以下操作：

elem.onClick = function (e) {
  e.preventDefault();
  document.getElementById('menu').style.width = '250px';
  document.getElementById('content').style.marginRight = '250px';
}

单击菜单图标使页面跳回顶部

Clicking menu icon makes the page jump back up to the top

javascript

css

hamburger-menu