So, I have a link at the bottom of website. When it is clicked, it scrolls to a form at the top of the page with the animated style. And as it arrives at top of page, it focuses on the first field in form.

Currently, this is my code:

$(document).ready(function() {          
    $('#goto-show-form').click(function() {
        $('html, body').animate({scrollTop: $("#show-form").offset().top}, '500');
        $('#first-field').focus();
        return false;
    });
});

What happens is it begins scrolling, then focuses to form field while still in process of scrolling, then returns to last position in scrolling process and continues scrolling up. Instead of being smooth, you can see it cuts back and forth.

How can I tell jquery to wait until scrolling is complete before focusing to the form field?

Here is the website: http://bit.ly/dfjvmT (The link that starts scroll is "Send us your resume" at the bottom.)

Thanks.