javascript - 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

"Why is this happening?"

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

幸运的是.animate() method为您提供一个选项来传递一个回调函数，该回调函数将在动画完成时调用，因此您可以在该回调函数内完成焦点:

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