Scroll page on text input focus for mobile devices?

Evanss picture Evanss · May 23, 2012 · Viewed 31.3k times · Source

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 phones, it would be a usability benefit if when you selected the input the page scrolled down so the input was at the top of the page. That way as much of the list below would be visible as you type. Is this possible and/or does anyone have experience doing it? Thanks

Answer

Stu Cox picture Stu Cox · Dec 30, 2012

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;
});