Question

我遇到了让脚本运行的问题。我正在使用Codyhouse中的这段代码向我的页面添加导航。它的基础是，单击汉堡包打开它，然后当您单击链接时，它应该滚动页面到该位置，同时关闭菜单。

这一切都运行正常，但因为动画正在使用变换：translateY(170px);，链接正在找到它的位置，但当它到达它时，页面已被移动170px，导致比它低170px需要在屏幕上。

我对修复的想法是延迟点击链接，直到动画结束，持续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

我找不到解决这个问题的方法，但是选择从页面中删除转换，因为链接到正确的位置对我来说更重要，然后产生这种效果。

延迟点击链接直到动画后

2 个答案: