Prevent screen down shift to the anchor at the responsive drop-down menu

Question

menu screenshot When drop-down menu appears (id="sub-menu-1" or "sub-menu-2", etc) after the click on top buttons (class="toggle-1" or "toggle-2", etc), it shifts the display down to the anchor and hides the top button menu (class="mobile-menu"). How I can prevent this shift? I tryed "pointer-events: none;", but then drop-down menu doesn't work at all.

$('.mobile-menu').each(function() {
    var $_navbar  = $(this);
    var $_toggles = $_navbar.find('.toggle');
    var $_panels = $_navbar.find('.sub-menu');
    var active_classname = 'active';

$_toggles.each(function() {
    var $_this_toggle = $(this);
    var $_this_panel = $( $_this_toggle.attr('sm-id') );

    $_this_toggle.click(function() {                                    
        $_toggles.not($_this_toggle).removeClass(active_classname);
        $_this_toggle.toggleClass(active_classname);
        $_panels.not($_this_panel).slideUp();
        $_this_panel.stop().slideToggle();
    });
});
});

<nav class="mob-nav">
  <div class="mobile-menu">
     <a sm-id="#sub-menu-1" class="hotdog toggle toggle-1" href="#sub-menu-1"></a>
     <a sm-id="#sub-menu-2" class="mob-menu-mail toggle toggle-2" href="#sub-menu-2"></a>
     <a sm-id="#sub-menu-3" class="mob-menu-phone toggle toggle-3" href="#sub-menu-3"></a>
     <a sm-id="#sub-menu-4" class="mob-menu-search toggle toggle-4" href="#sub-menu-4"></a>
  </div>

  <div class="sub-menu-wrapper">
        <div id="sub-menu-1" class="sub-menu">
          <ul>
            <li><a href="#">Продукция</a></li>
            <li><a href="#">Технологии применения</a></li>
            <li><a href="#">Объекты</a></li>
            <li><a href="#">Документация</a></li>
            <li><a href="#">О компании</a></li>
            <li class="profile-links">
              <span>
                <a href="#">Заказчику</a>
              </span>
              <span>
                <a href="#">Проектировщику</a>
              </span>
            </li>
            <li class="profile-links">
              <span>
                <a href="#">Подрядчику</a>
              </span>
              <span>
                <a href="#">Частным клиентам</a>
              </span>
            </li>
          </ul>
        </div>
        <div id="sub-menu-2" class="sub-menu">
          <form action="post" class="email-feedback">
            <input type="text" name="user-name" class="mob-nav-input" placeholder="Ваше имя">
            <input type="text" name="mobile-number" class="mob-nav-input" placeholder="Номер телефона">
            <textarea name="interest" class="mob-nav-input" placeholder="Что Вас интересует?"></textarea>
            <a href="#" class="button">Отправить</a>
          </form>
        </div>
        <div id="sub-menu-3" class="sub-menu">
          <ul>
            <li>+7 812 423-85-85</li>
            <li>+7 812 423-85-85</li>
          </ul>
        </div>
        <div id="sub-menu-4" class="sub-menu">
          <form action="post" class="mobile-search">
            <input type="search" class="mob-nav-input">
            <input type="submit" class="search-param-sub" value="">
          </form>
        </div>
      </div>

.mobile-menu {
    overflow: hidden;
}

.mobile-menu a {
    border: #3a3a3a 1px solid;
    height: 60px;
    display: block;
    width: 25%;
    float: left;
}

.sub-menu {
    padding-top: 10px;
    display: none;
}

Where I should search the solution? In CSS or JS?

Answer 1

You're looking for event.preventDefault()

$_this_toggle.click(function(e) {                                    
  e.preventDefault();

Since your anchors have an href which begins with a # and that hash value corresponds to an element on the page with the same id or name browsers will scroll the page down to the matching element, and also change the hash in the URL. You need to prevent the default browser behaviour.

Answer 2

add to a tag this onclick="event.preventDefault()"

<a onclick="event.preventDefault()" sm-id="#sub-menu-2" class="mob-menu-mail toggle toggle-2" href="#sub-menu-2"></a>

the simplest solution is this. when you click a tag with attribute href="#example" naturally it is forcing browser to go a tag which has id="example" attribute. Avoid for this you should use event.preventDefault() properly