CODEWITHSUNDEEP
javascripthtmljquerycss
Bharat Kumar
Bharat Kumar

Reputation: 467

HTML Side Menu(vertical) scroll to active item on page load

My website has a vertical side menu with around 20 items. When a item is click it loads the destination, but the side menu needs to be again scrolled to find the active items if at the bottom of the side menu. Now how do I make the side menu auto scroll to active item on page load. Code snippet as below. Please help.

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

Upvotes: 1

Views: 1674

Answers (2)

Ezani
Ezani

Reputation: 557

You should ideally be using two , one for the menu and one for the display destination page. You can have an id tag for each menu item and set it to have the focus. So for example:

<li id="6" class="">
    <a href="page6.html">Page 6</a>
</li>

You can use document.getElementById("6").focus() to set the focus to the 6th item. Aternatively, you can make the menu div section non-scrolling.

Upvotes: 0

Pavan Teja
Pavan Teja

Reputation: 3202

If you are using javascript/JQuery then you one way to do this is by saving the selected item index in localStorage.Then fetch the saved index on window.onload/document.ready and then use scrollIntoView/animate to autoscroll to active item.

Upvotes: 1

Related Questions