How to move to a specific element in a scrollable div in html using jquery? [duplicate]

I have a scrollable div in which I have some elements. This div opens when I click on a hyperlinked text. I want that when the div become opened then the div must be scrolled to that specific point. I have tried but I am not able to do that. Please help!

It is like that I have an element on one page and when I click for details the same text should be at the top of div with highlights.

<div class="col-md-3" style="height: 500px; overflow: scroll;">
    <ul class="nav flex-column nav-pills arealinks" style="">
        <li class="nav-item"><a class="nav-link lahore" href="#">Lahore</a></li>
        <li class="nav-item"><a class="nav-link faisalabad" href="#">Faisalabad</a></li>
        <li class="nav-item"><a class="nav-link multan" href="#">Multan</a></li>
        <li class="nav-item"><a class="nav-link bahawalpur" href="#">Bahawalpur</a></li>
        <li class="nav-item"><a class="nav-link wazirabad" href="#">Wazirabad</a></li>
        <li class="nav-item"><a class="nav-link sargodha" href="#">Sargodha</a></li>
        <li class="nav-item"><a class="nav-link sialkot" href="#">Sialkot</a></li>
        <li class="nav-item"><a class="nav-link karachi" href="#">Karachi</a></li>
        <li class="nav-item"><a class="nav-link hyderabad" href="#">Hyderabad</a></li>
        <li class="nav-item"><a class="nav-link mirpur_khas" href="#">Mirpur Khas</a></li>
        <li class="nav-item"><a class="nav-link quetta" href="#">Quetta</a></li>
        <li class="nav-item"><a class="nav-link peshawar" href="#">Peshawar</a></li>
        <li class="nav-item"><a class="nav-link kohat" href="#">Kohat</a></li>
        <li class="nav-item"><a class="nav-link d_i_khan" href="#">D I Khan</a></li>
    </ul>
</div>