2

ユーザーをページ上部の検索入力にスクロールして戻してから、それにフォーカスを当てる機能があります(カーソルが点滅しているため)。どういうわけか、最初に検索入力にフォーカスを当てているようです。これにより、ページの検索バーへの非常に速いジャンプ/不規則な動きが作成され、一番下にジャンプして戻り、ゆっくりと上にスクロールします。

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() を適用するようです。なぜこうなった？

4

3 に答える 3

14

"なぜこうなった？"

アニメーション効果は非同期です。つまり、関数はアニメーションを「スケジュール」した直後.animate()に戻り（いわば）、実行は次のステートメント（この場合はステートメント）ですぐに続行されます。実際のアニメーションは、現在のJSが完了した後に実行されます。.focus()

幸い、この.animate()メソッドには、アニメーションの完了時に呼び出されるコールバック関数を渡すためのオプションが用意されているため、そのコールバック関数内でフォーカスを行うことができます。

$('html,body').animate({scrollTop: $('#search').offset().top},'medium', function(){
    $('#search').focus();
});
于 2012-09-10T00:32:30.920 に答える
4

次のように、アニメーションが完了したら focus 関数を呼び出す必要があります。

function goToSearch(){
    $('html,body').animate({scrollTop: $('#search').offset().top},'medium',function(){
        $('#search').focus();
    });
}
于 2012-09-10T00:26:12.443 に答える