Javascript focus（）导致页面跳转

我有一个功能，可以将用户滚动回页面顶部的搜索输入，然后将焦点放在上面（因此光标闪烁）。出于某种原因，它似乎首先将焦点应用于搜索输入。这会使页面快速跳转/跳跃式移动到搜索栏，跳回底部，然后缓慢向上滚动

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（）。为什么会发生这种情况？

动画完成后，应该调用focus函数，如下所示：

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

“为什么会这样？”

动画效果是异步的。也就是说，

.animate（）

函数在“调度”动画（可以说）之后立即返回，并在执行下一条语句时立即继续执行，在您的例子中，就是

.focus（）

语句。实际动画将在当前JS完成后进行

幸运的是，为您提供了一个选项，可以传递一个回调函数，该函数将在动画完成时调用，因此您可以在该回调函数中进行聚焦：

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

---

如果你像我一样发现了这个问题，你可能是在寻找一个CSS相关的问题，再加上js focus（），你可能会觉得自己运气不好。好吧，再想想——好消息是，有一种方法可以在CSS动画或转换结束时进行回调，然后触发事件

您可以使用jQuery的方法，并使用

WebKittTransitionEnd

otransitionend

otransitionend

msTransitionEnd

transitionend

进行转换，或者使用

webkitAnimationEnd

oanimationend进行转换动画

一个例子：

JS:

CSS:

这个解决方案不是我的，我只是在浪费了几个小时后才找到的，我会发布它，以防你先找到这个问题

资料来源：

var myButton = $('#button'),
   myBox = $('#box');
    myButton.click(function () { 
    myBox.addClass('change-size');
    myBox.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',   
    function(e) {
    // code to execute after animation ends
    myBox.removeClass('change-size');
    });

});

.box {
   width: 100px;
   height: 100px;
   background: hotpink;
}

@keyframes growBox {
    to {
        width: 300px;
        height: 200px;
    }
}

.change-size {
    animation: growBox 3s linear 0s 1 normal;
}