Jquery 链接单击固定元素上的toggleClass（脱离画布菜单）会导致跳转到页面顶部

因此，我有以下标记。我有一个粘性导航栏（菜单栏），当点击按钮时，通过向html元素添加一个类（slide-wrapper\uuu open），会使用css转换显示离开画布的菜单

HTML

    <div class="menu-bar">
    <div class="menu-btn">
        <a href="" class="menu-btn__toggle">
            <i class="fa fa-bars"></i>
        </a>
    </div>
</div>

<div class="slide-wrapper">
    <nav class="nav-menu">
        <ul class="nav-menu__menu">

        </ul>
    </nav>
</div>

JS

@import "../modules/mixins";

.menu-bar {
  @include mobile {
    width: 100%;
    height: 50px;
    position: fixed;
    border-bottom: 1px solid $lightGreyBorder;
    background: white;
    z-index: 100;
  }
  @include tablet {
   display:none;
  }
  @include tablet-land {
    display:none;
  }
  @include desktop {
    display: none;
  }
}

.menu-btn {
  @include mobile {
    height: inherit;
    width: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 1.4rem;
    float: right;
  }
}

.slide-wrapper {
  @include mobile {
    width:80%;
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    z-index: 0;

  }
  @include tablet {
   display:none;
  }
  @include tablet-land {
    display:none;
  }
  @include desktop {
    display: none;
  }

  .nav-menu {
    @include mobile {
      position: absolute;
      background: rgba(0,0,0,0.65);
      width: 100%;
      right: -100%;
      height: 100%;
      transition: ease 0.5s all;
    }
  }
}

.slide-wrapper__open {
  .page {
    @include mobile {
      right: 80%;
      transition: ease 0.5s all;
      overflow: hidden;
    }
  }
  .slide-wrapper {
    right: 0;
    top: 0;
    height: 100%;
    z-index: 0;

    .nav-menu {
      @include mobile {
        right: 0%;
        transition: ease 0.5 all;
      }
    }

  }
}

.page {
  @include mobile {
    width: 100%;
    height: 100vh;
    position: relative;
    right: 0;
    transition: ease 0.6s all;
  }
}

$(".class").click(function(e){ //stack overflow is giving me code errors but the class name i used was the correct one.
    e.preventDefault();
    $("html").toggleClass("slide-wrapper__open");
});

但是，当我单击链接时，页面立即滚动到页面顶部，并打开“离开画布”菜单。当我删除这个切换类并单击时，页面不会滚动到顶部，但显然菜单不会出现

因此，我知道这要么是CSS转换的问题，要么是toggleClass函数的问题。我尝试了一切，从返回错误到#！在链接中，尝试回滚到在（$（document）.scrollTop（scroll_POS）；）等处发生单击的位置。scroll方法仅在菜单关闭时部分工作，如果打开（类添加到html标记），它仍会一直滚动到页面顶部

有没有人能告诉我这个问题是否有解决办法

谢谢

编辑-原件

编辑-工作

---

我怀疑这是默认的浏览器行为，因为

href=“”

。而且由于

preventDefault

也不是神圣的，所以唯一好的解决方案就是向DOM返回一个void。如果尚未完成，请尝试以下操作：

<a href="javascript:void(0);" class="menu-btn__toggle">
    <i class="fa fa-bars"></i>
</a>

---

通过检查单击div是否确实会在url中添加哈希，可以判断问题是否是由链接引起的。一个独立的散列相当于“_top”，因此在像您这样的情况下，向锚点添加一些东西（甚至是伪数字）有时确实有效

然而，如果没有添加散列（这意味着确实防止了defual事件），我会猜测css问题，比如文档的高度缩小到窗口高度以下（由于某些相对位置）

---

如果你能稍微操纵一下html，那么在

a

中添加一个

span

标记，并在其上附加一个带有

event.stopPropagation（）的click事件就可以了
stopPropagation
将确保您的事件不会冒泡到
a
标记，这样
a
标记默认操作就不会被触发
 嗯，我想我已经找到了问题所在，如果我删除该行，使用溢出隐藏锁定屏幕将强制页面顶部。解决方案是删除.page类上隐藏的溢出，并将其应用于添加到html中的.menu-bar\uu open。当溢出隐藏应用于.page时，这将停止向上滚动行为。这纯粹是一个css问题，因为我在提出问题之前已经测试过事件没有传播。感谢
标记需要某种文本内容才能访问。如果不希望文本可见，请使用
aria label=“menu”
属性或类似于Bootstrap的
sronly
CSS类。