Запрет перехода на верх страницы после нажатия кнопки меню

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