Question

I am making form validation and when user doesn’t fill one of required fields I want position of the page to focus on that input but I don’t want input field to be directly to the top of the browser frame, I want to leave some space between so that title of input form can also be seen.

This is how it looks with focus() only

but I want it like this:

The idea is to keep typing cursor focused on input field.

EDIT: If it’s possible to use animated focus that would be awesome. Are there any suggestions how to do that?

Answer 1

One way using jQuery: scroll the window to the vertical offset of the label.

$(function(){
    $(window).scrollTop($("label").offset().top);
    $("input").focus();
});

Or scroll to the input element with some additional margin:

$(function(){
    $(window).scrollTop($("input").offset().top - 100);
    $("input").focus();
});

(Note: replace “input” and “label” with the proper selector)