Scroll page on text input focus for mobile devices?

Question

Im making a mobile optimised site with a text input which filters a list as you type. Its similar to this: http://jquerymobile.com/test/docs/lists/lists-search.html

For

Answer 1

Agreed - that'd be nice for usability.

If you're using jQuery, this should do the trick:

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

Answer 2

A better solution would be:

$('#id-of-text-input').on('focus', function() {
   document.body.scrollTop += this.getBoundingClientRect().top - 10
});

Because offsetTop (or .offset().top if using Jquery) returns the distance from the first positioned parent, whereas you need the distance from the top of the document.

getBoundingClientRect().top returns the distance between the current viewport position to the element, u.e. if you're scrolled 300px below the element, it would return -300. So adding the distance using += would scroll to the element. -10 is optional - to allow some space at the top.

Answer 3

$('input, textarea').focus(function () {
    $('html, body').animate({ scrollTop: ($('input, textarea').offset().top - 10) }, 1);
    return false;
});