Question

所以我有以下标记。我有一个粘性导航栏（菜单栏），当单击该按钮时，通过向html元素添加一个类（slide-wrapper__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>

CSS

@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;
  }
}

JS

$(".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函数。我已经尝试了从返回false到＃！在链接中，尝试滚动回到点击发生的位置（$（document）.scrollTop（SCROLL_POS）;）等。滚动方法仅在菜单关闭时才能部分工作（如果打开（类添加到html标签））它仍然会一直滚动到页面顶部。

任何人都可以告诉我是否有解决此问题的方法。

由于

编辑 - 原始

ORIGINAL JS FIDDLE

编辑 - 工作

WORKING JS FIDDLE

Answer 1

我怀疑这是href=""引起的默认浏览器行为。而且由于preventDefault并不神圣，否则唯一的好办法就是将空白返回给DOM。如果您还没有完成，请尝试这样做：

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

Answer 2

您可以通过检查点击您的div是否确实为您的网址添加了哈希来判断您的问题是否是由链接引起的。一个独立的哈希相当于“_top”，所以在像你这样的情况下向锚点添加一些东西（甚至虚拟数字）确实有效。

然而，如果没有添加哈希（这意味着确实阻止了defual事件），那么就像我猜测的css问题一样，比如文档的高度缩小到窗口的高度以下（由于一些相对定位））。

如果您能负担得起操纵html，那么将span标记放在a内并附加一个带有event.stopPropagation()的点击事件就可以了。 stopPropagation woud确保您的活动没有冒出a标记，因此a标记默认操作根本不会被触发。

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

2 个答案: