展开 <li> 项时保持滚动位置答案

【问题标题】：Maintain scroll position when expanding <li> item展开 <li> 项时保持滚动位置
【发布时间】：2020-05-19 04:05:35
【问题描述】：

我正在制作一个引导侧菜单。有<li> 可以展开和折叠以显示或隐藏其他菜单/链接。

目前，当我打开<li> 时，页面的滚动位置会重置回顶部。我希望页面在打开<li> 时保持其滚动位置。

这是一个sn-p：

 <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>

谁能帮助我编写代码或指出正确的方向？

【问题讨论】：

你能做一个jsfiddle或codepen吗？会有帮助的

标签： javascript html css asp.net

【解决方案1】：

这是由于您在href 中使用的# 将其替换为

href="JavaScript:Void(0);"

喜欢

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

第二个解决方案

只需使用“#/”或“#!”而不是“#”，页面不会跳转。

【讨论】：