Сохранять позицию прокрутки при расширении элемента <li>

Question

У меня есть bootstrap боковое меню, которое я делаю. Существуют <li>, которые можно израсходовать и свернуть, чтобы отобразить или скрыть дополнительные меню / ссылки.

В настоящее время, когда я открываю <li>, позиция прокрутки страницы возвращается наверх. Я хотел бы, чтобы страница сохраняла свою позицию прокрутки при открытии <li>.

Это фрагмент:

 <div id="wrapper">

<!-- Sidebar -->
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">

  <!-- Sidebar - Brand -->
  <a class="sidebar-brand d-flex align-items-center justify-content-center" href="/">
    <div class="sidebar-brand-icon rotate-n-15">
      <i class="fas fa-briefcase"></i>
    </div>
    <div class="sidebar-brand-text mx-3">Business Centre</div>
  </a>

        <!-- Nav Item - Setting Collapse Menu -->
  <li class="nav-item">
    <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseAccount" aria-expanded="true" aria-controls="collapseAccount">
      <i class="far fa-user-circle"></i>
      <span>Account</span>
    </a>
    <div id="collapseAccount" class="collapse" aria-labelledby="headingAccount" data-parent="#accordionSidebar">
      <div class="bg-white py-2 collapse-inner rounded">
        <a class="collapse-item" href="login.html">Membership</a>
        <a class="collapse-item" href="login.html">Information</a>
        <a class="collapse-item" href="login.html">Contact Us</a>
      </div>
    </div>
  </li>
    </ul>
     </div>

Может кто-нибудь помочь с кодом или указать мне справа направление

Answer 1

Это из-за #, который вы используете в href, замените его на

href = "JavaScript: Void (0);"

как

<a class="nav-link collapsed" href="JavaScript:Void(0);" ...

Второе решение

Просто используйте "# /" или "#!" вместо "#" и страница не будет прыгать.