单击菜单按钮后防止进入页面顶部

Question

我有一个固定的菜单按钮，单击该按钮时会显示菜单项。问题在于，当单击它时，它总是在打开菜单之前一直到达页面顶部。我尝试了宽度e.preventDefault();和e.stopImmediatePropagation()，但是什么也没有发生。我认为应该有一种方法来检测滚动位置，以使菜单div保持在页面上打开位置相同的位置。另外，请注意，在单击菜单按钮时，我将overflow:hidden应用于正文和HTML以使其固定。

$(".nav-mobile-toggle").click(function() {
  $("html,body").css("overflow", "hidden");
  event.preventDefault();
});

body {
  background: #fff;
  font-size: 22px;
  line-height: 28.6px;
  color: #005153;
  overflow: hidden !important;
}

html,
body {
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav-mobile-toggle pt8" data-modal-id data-notification-link="nav-slide">
  <div class="btn--menu">
    <span class="h6 nombre">Menu</span>
    <i class="icon-Align-Right icon icon--sm"></i>
  </div>
</div>
<div class="notification pos-right pos-top nav-slide col-sm-4 col-xs-12 bg--primary-1" data-notification-link="nav-slide" data-animation="from-right" id="notification">
  <div class="nav-slide__content">
    <div class="pt104 text-left">
      <ul class="menu">
        <li>
          <a href="/">
            <span class="h3">Inicio</span>
          </a>
        </li>
        <li>
          <a href="/el-despacho.php">
            <span class="h3">El despacho</span>
          </a>
        </li>
        <li>
          <a href="/quienes-somos.php">
            <span class="h3">Quiénes somos</span>
          </a>
        </li>
        <li>
          <a href="/que-nos-diferencia.php">
            <span class="h3">Qué nos diferencia</span>
          </a>
        </li>
        <li>
          <a href="/lo-que-opinan.php">
            <span class="h3">Qué opinan de nosotros</span>
          </a>
        </li>
        <li>
          <a href="/areas-practica.php">
            <span class="h3">Áreas de práctica</span>
          </a>
        </li>
        <li>
          <a href="/blog">
            <span class="h3">Blog</span>
          </a>
        </li>
        <li>
          <a href="/contacto.php">
            <span class="h3">Contacta con nosotros</span>
          </a>
        </li>
      </ul>
    </div>
    <div class="pos-absolute pos-bottom menu-footer text-right">
      <p class="tel">
        <a href="tel:123456789" style="text-decoration:none;">123 456 789</a>
      </p>
      <p class="mail">
        <a href="mailto:info@example.com" style="text-decoration:none;">info@example.com</a>
      </p>
    </div>
  </div>
</div>

Answer 1

在函数中添加event参数：

$(".nav-mobile-toggle").click(function(event){
      event.preventDefault();
    });