Задержка нажимать на ссылку до после анимации

Question

У меня проблемы с получением моего скрипта. Я использую этот бит кода от Codyhouse, чтобы добавить навигацию на мою страницу. Основы этого: щелчок гамбургера открывает его, затем, когда вы нажимаете на ссылку, она должна прокручивать страницу до этого места, закрывая меню.

Это все работает отлично, но поскольку анимация использует преобразование: translateY(170px);, ссылка находит ее позицию, но когда она добирается до нее, страница была перемещена на 170 пикселей, в результате получилось 170 пикселей ниже, где она должна быть на экране.

Моей целью исправить было отсрочить щелчок по ссылке до окончания анимации, которая длится 0,5 секунды, а затем перейти к точке на странице.

Это мой сценарий,

$('.nav-click').click(function (e) { 
    e.preventDefault();     
    var goTo = this.getAttribute("href"); 
    setTimeout(function(){ 
     window.location = goTo; 
    },2000);  
}); 

Результат моего сценария является то, что при нажатии на ссылку, он все еще прокручивает в положение на странице, а затем, после 2-х секунд у меня есть в настоящий момент он переместится в нужное место на странице.

Он должен ждать 2 секунды, а затем после этого href.

Answer 1

Попробуйте делать что-то вроде этого:

$('.nav-click').click(function(e) { 
    e.preventDefault(); 
    var goTo = this.getAttribute('href'); 

    var interval = setInterval(function() { 
     if (!$('main').hasClass('nav-is-visible')) { 
      clearInterval(interval); 
      window.location = goTo; 
     } 
    }, 100); 
}); 

Answer 2

Я не нашел решение этой проблемы, но решили удалить преобразование со страницы все вместе, как ссылки, идущие в нужном месте для меня важнее то имеющий этот эффект.