Асинхронная функция внутри цикла. Как решить конкретную задачу?

Question

Доброго времени суток. Я только начинаю делать шаги в JS и никак не могу сообразить, как сделать чтобы все работало.

Есть 6 якорей (ссылки внутри страницы), хочу сделать плавную прокрутку к каждому якорю. Я хочу разобраться именно с этим способом, а не другим.

fixMenuLink - это массив ссылок. elemLink - тут я получаю куда ссылаются ссылки и записываю их в массив elem. И затем собственно я хочу вызвать функцию, которая переместит к нужной точке. Только вот возвращает всегда к последнему элементу.

Я понимаю почему, но не понимаю как это можно решить в данном случае. Буду признателен за совет!

var fixMenuLink = document.getElementsByClassName('fix-menu__link');
var elem = [];
for (var i = 0; i < fixMenuLink.length; i++) {
    var elemLink = fixMenuLink[i].href.match(/\w+/ig);
    elemLink = elemLink[elemLink.length-1];
    elem.push(document.getElementById(elemLink));
    fixMenuLink[i].addEventListener('click',function (e) {
       e.preventDefault();//отключаю ссылку
       moveToSection(elem[i],0);//Функция плавного перемещения 
    });
}

Вот такой html

<ul class="array-links">
    <li>
        <a class="fix-menu__link" href="#1">Якорь 1</a>
    </li>
    <li>
        <a class="fix-menu__link" href="#2">Якорь 2</a> 
    </li>
    <li>
        <a class="fix-menu__link" href="#3">Якорь 3</a>
    </li>
    <li>
        <a class="fix-menu__link" href="#4">Якорь 4</a>
    </li>
    <li>
        <a class="fix-menu__link" href="#5">Якорь 5</a>
    </li>
    <li>
        <a class="fix-menu__link" href="#6">Якорь 6</a>
    </li>
</ul>