I'm currently facing an issue with my script not functioning correctly. The code I'm utilizing is from a resource provided by Codyhouse to implement a 3D rotating navigation menu on my webpage. Essentially, when you click the hamburger icon, it opens up the menu, and upon clicking a link, it should smoothly scroll to that section while closing the menu.
Everything seems to work fine, but due to the animation using transform: translateY(170px);, the page shifts down by 170px once the link reaches its destination, causing it to appear lower on the screen than intended.
To address this problem, my approach was to introduce a delay before executing the link click action. Since the animation lasts for 0.5 seconds, my idea was to wait until it completes and then proceed to navigate to the specified location on the page.
This is the snippet of my script:
$('.nav-click').click(function (e) {
e.preventDefault();
var goTo = this.getAttribute("href");
setTimeout(function(){
window.location = goTo;
},2000);
});
The issue I'm encountering is that after clicking on the link, it initially scrolls to the target position, waits for 2 seconds as per my current setting, and then abruptly jumps to the correct place on the page.
The desired behavior is for the script to pause for 2 seconds before following the href attribute.