时间戳

首页 > 解决方案 > HTML侧菜单（垂直）滚动到页面加载时的活动项目

javascript - HTML侧菜单（垂直）滚动到页面加载时的活动项目

问题描述

我的网站有一个包含大约 20 个项目的垂直侧菜单。当一个项目被点击时，它会加载目的地，但如果在侧边菜单的底部，需要再次滚动侧边菜单才能找到活动项目。现在如何使侧边菜单在页面加载时自动滚动到活动项目。代码片段如下。请帮忙。

<nav class="menu">
   <ul class="sidebar-menu metismenu" id="sidebar-menu">
       <li class="">
          <a href="page1.html">Page 1</a>
       </li>
       <li class="">
          <a href="page2.html">Page 2</a>
       </li>
       <li class="">
          <a href="page3.html">Page 3</a>
       </li>
       <li class="">
          <a href="page4.html">Page 4</a>
       </li>
       <li class="">
          <a href="page5.html">Page 5</a>
       </li>
        <li class="">
          <a href="page6.html">Page 6</a>
       </li>
        <li class="">
          <a href="page7.html">Page 7</a>
       </li> 
      .......
       <li class="active">
          <a href="page20.html">Page 20</a>
       </li>
   </ul>
</nav>

标签： javascripthtmljquerycss

解决方案

如果您使用的是 javascript/JQuery，那么执行此操作的一种方法是将所选项目索引保存在 localStorage 中。然后在 window.onload/document.ready 上获取保存的索引，然后使用 scrollIntoView/animate 自动滚动到活动项目。

推荐阅读