jquery scroll to form input

Question

I'm attempting a scrollTo() on a webpage and I want a button to trigger the scrollTo(); it will scroll to the top of the form and highlight the first input field.

My current code works, however the screen quickly flashes. I attempted to use a preventDefault() to no avail. Please see my code below.

$(document).ready(function () {
    $("#get-started").click(function (e) {
        e.preventDefault();
        $('html, body').animate({
            scrollTop: $("#get-risk").offset().top
        }, 2000);
        $("#get-started-apply-now-form [name='last_name']").focus();
    });
});

instead of using .animate(), could you just use .scrollTo()? flesler.com/jquery/scrollTo — ntgCleaner
– ntgCleaner, Commented Jan 22, 2014 at 19:30

adeneo · Accepted Answer · 2014-01-22 19:32:03Z

12

When focusing an element, the browser scrolls to that element, messing up your animation.

Place the focus in the animations callback to avoid it.

$(document).ready(function () {
    $("#get-started").click(function (e) {
        e.preventDefault();
        $('html, body').animate({
            scrollTop: $("#get-risk").offset().top
        }, 2000, function() {
            $("#get-started-apply-now-form [name='last_name']").focus();
        });
    });
});

answered Jan 22, 2014 at 19:32

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jared Michael Czerew Over a year ago

thanks adeneo! by placing the focus in the animations callback it works great!

Collectives™ on Stack Overflow

jquery scroll to form input

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related