Как исправить скрол в меню по клику?

Question

[AlexHit2017]

У меня есть блок с списком ul в котором есть саб меню, саб меню изначально скрыто и должно раскрывается по клику, а так же заголовок меню должен скролится вверх.
Пример кода:

<div class="burger_menu">
	<div class="burger_block">
        <ul id="top-burger" class="burg_me top-burger-m">
            <li class="menu-item"><a href="/#" aria-current="page">Станица 1</a>
                <ul class="sub-menu">
                    <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 1</a>
                    <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 2</a>
                    <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 3</a>
                    <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 4</a>
                </ul>
            </li>
            <li class="menu-item"><a href="/#" aria-current="page">Станица 2</a>
                <ul class="sub-menu">
                    <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 1</a>
                    <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 2</a>
                    <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 3</a>
                    <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 4</a>
                </ul>
            </li>
            <li class="menu-item"><a href="/#" aria-current="page">Станица 3</a>
                <ul class="sub-menu">
                    <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 1</a>
                    <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 2</a>
                    <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 3</a>
                    <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 4</a>
                </ul>
            </li>
            <li class="menu-item"><a href="/#" aria-current="page">Станица 4</a>
                <ul class="sub-menu">
                    <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 1</a>
                    <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 2</a>
                    <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 3</a>
                    <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 4</a>
                </ul>
            </li>
            <li class="menu-item"><a href="/#" aria-current="page">Станица 5</a>
                <ul class="sub-menu">
                    <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 1</a>
                    <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 2</a>
                    <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 3</a>
                    <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 4</a>
                </ul>
            </li>
        </ul>    
	</div>
</div>

jQuery('#top-burger li').click(function() { 
        jQuery(this).toggleClass('actt'); 
        jQuery('.actt').not(jQuery(this)).removeClass('actt');
        jQuery('.burger_menu').scrollTop(jQuery(this).position().top);
    });

.burger_menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 480px;
    height: 100vh;
    position: absolute;
    right: 0;
    top: 60px;
    flex-wrap: nowrap;
    z-index: -1;
    overflow: hidden;
}
.burger_menu.act {
    z-index: 8;
    background: #fff;
    overflow-y: auto;
}
.burger_block {
    width: 480px;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    background: #fff;
    position: absolute;
    margin-left: 480px;
    transition: 0.2s all ease;
    -webkit-transition: 0.4s all ease;
}
.burger_menu.act .burger_block {
    margin-left: 0;
    transition: 0.2s all ease;
    -webkit-transition: 0.4s all ease;
    position: relative;
}
#top-burger {
    margin: 40px 0 50px;
    padding-left: 50px;
    list-style: none;
}

#top-burger li {
    font-size: 20px;
    color: #6d6d6d;
    max-width: 380px;
    width: 100%;
    display: block;
    margin-bottom: 20px;
    position: relative;
}
#top-burger li .sub-menu {
    padding-left: 30px;
    overflow: hidden;
    display: block;
    list-style: none;
    max-height: 0;
    transition: 0.2s all ease;
    -webkit-transition: 0.4s all ease;
}
#top-burger li.actt .sub-menu {
    max-height: 1000px;
}

На данный момент код jQuery срабатывает, но только добавляет класс "actt" но скрол не происходит, скрол происходит только по второму клику.
Уже всю голову себе сломал, не понимаю как это исправить?

Answer 1

[AlexHit2017]

Вопрос решен, код исправно работал, проблема была в маленьком списке, так же стоит добавить задержку выполнения скрипта setTimeout.
И все работает.