My website features a vertical side menu with approximately 20 items. The issue I am facing is that when a user clicks on an item, the destination loads but the side menu must be manually scrolled to find the active item if it's located at the bottom of the list. Is there a way to automatically scroll the side menu to the active item when the page loads? Below is a snippet of the code. Any assistance would be appreciated.
<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>