Question

I am using the following code to scroll the window to position (0, 0) every time a user focuses on an input field within my Phonegap application:

<input type="text" id="answer" class="answer" />
...

$(document).on("touchstart", ".answer", function() {
  window.scrollTo(0, 0);
});

I also tried a setTimeout(), however this doesn’t work either:

$(document).on("touchstart", ".answer", function() {
  window.scrollTo(0, 0);
  setTimeout(function() {
     scrollWindow();
  }, 10);

  var scrollWindow = function() {
     window.scrollTo(0, 0);
  }
});

The problem is that the window only scrolls the second time I tap the input field. I would like the window to scroll immediately when I tap the input field for the first time.

The reason why I am moving the window is because iOS spawns the native keyboard on focus of an input field and shifts the entire view up.

Answer 1

To do this I usually use “focus” instead of “touchstart”.

$('#someFormId input').on("focus", function(event) {
    window.scrollTo(0, 0);
    document.body.scrollTop = 0;
});