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

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();
    });