jQuery .focus()导致页面跳转

Question

我有一个功能,应该将用户滚动回页面顶部的搜索输入,然后将焦点放在它上面(这样光标闪烁).出于某种原因,它似乎首先将焦点应用于搜索输入.这会在页面上创建一个非常快速的跳跃/ spazzy运动到搜索栏,跳回到底部,然后慢慢向上滚动.

Javascript:

function goToSearch(){
    $('html,body').animate({scrollTop: $('#search').offset().top},'medium');
    $('#search').focus()
}

HTML:

<input type="text" id="search" placeholder="search">
...
<a href="#" onclick="goToSearch()">Search</a>

我试过设置.delay()函数无济于事; 似乎总是首先应用.focus().为什么会这样？

Answer 1

"为什么会这样？"

动画效果是异步的.也就是说,.animate()函数在"调度"动画之后立即返回(可以这么说)并立即继续执行下一个语句 - 在您的情况下,.focus()语句.实际动画将在当前JS完成后发生.

幸运的是,该.animate()方法为您提供了一个传递回调函数的选项,该函数将在动画完成时调用,因此您可以在该回调函数中进行聚焦:

$('html,body').animate({scrollTop: $('#search').offset().top},'medium', function(){
    $('#search').focus();
});