Thomas Thomas - 2 months ago 5x
Javascript Question

jQuery input field sent to top of page fix

I am making a signin form with multiple input fields. It is going onto an ipad and because of this I want to make the input field move to the top of the screen after you click it so that the fields don't get blocked by the keyboard. I am using the following code.

$('#signinform input').on('focus', function() {
document.body.scrollTop = $(this).offset().top; });

This works great but it shoots the field to the very top, is there a way to stop it 10 px before so that I can still see the title for the specific input field? Do I need to put a value into the offset part of the jQuery?

What is happening (pic)

What I want to happen (pic)

Thank you


Try subtracting 30px from the offset. You can do math calculations right on that function.

document.body.scrollTop = $(this).offset().top - 30 ;