Фокус на нужном элементе списка с помощью jQuery?

Question

[hellion35]

Всем привет. У меня есть список:

<ul>
<li></li>
<li></li>
<li></li>
</ul>

Сам список находится в блоке ограниченной высоты со скроллингом overflow: auto. У одного из элемента списка есть класс active, мне необходимо что бы этот блок со скроллом автоматически проматывался до активного элемента списка при загрузке страницы или каком либо другом действии.
Пробовал так:

jQuery( 'ul.cities' ).scrollTop( jQuery( 'ul.cities .active' ).position().top );

и так:
jQuery( 'ul.cities .active' ).focus();
это не помогло, подскажите пожалуйста, каким образом это можно реализовать?

Answer 1

[Beliyadm]

Так? https://codepen.io/beliyadm/pen/PoEKGEj