Scrolltop with the field that is in focus

Question

I’m needing to know the px size of the input field with a focus on the top of the screen. To give a scrollTOP and the focus field stay at the top of the screen.

The idea of the problem is as follows:

I am working mobile, and I am using hybrid methods to develop, for this reason I have HTML5, CSS3 ,JQUERY among other web media to develop. I need a Generic solution so that whatever page the person is browsing, they take the field that is being typed and put it at the top of the page. The page in the sense of div, for every div is a view, to div that is being visualized has the display: block but the rest are left with display: none.

Through the specifications how to develop ?

I started doing some things but I don’t know how to continue, follow the code:

window.addEventListener("resize", function() {
is_keyboard = (window.innerHeight < initial_screen_size);
is_landscape = (screen.height < screen.width);

updateViews();
}, false);

function updateViews() {
 // $("#ajusteTeclado").show();
  console.log("Entro aqui.");

    var elmnt = document.getElementById("login");
    elmnt.scrollTop = 500;

  $('#login').css('top','100px');

}

However as I used it is all manual I need to take the field in focus.

Answer 1

You can use jQuery to calculate the distance to the top, and after using the function scrollTop() to "take the input up". It would look like this:

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$( "input" ).focus(function() {
     var scrollTop     = $(window).scrollTop(),
        elementOffset = $(this).offset().top,
        distance      = (elementOffset - scrollTop);
    
  $('html, body').animate({
    scrollTop: $(this).offset().top
    }, distance);

  });
});//]]> 

</script>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>

In this example, you "take" the event phocus() jQuery, and calculates the distance of the highlighted element to the top of the page. By calculating this distance, just add it to the scrollTop.

Follows this example in Jsfiddle.

Answer 2

Use jQuery for this.

var el = $("#seuidentificador");

el.stop().animate({scrollTop:0}, '500', 'swing', function() { 

   console.log("Funcionou!!!");

});

Where, his its identifier is your input.

If you don’t have an identifier in the input, just scan the elements and check which input is with Focus.

Answer 3

I made a jsFiddle to test your problem. I don’t know if I’m addressing the problem you’re having, but notice that .scrollTop(); of an element that receives a Focus will give error, because the event is triggered before the element and scroll is in the right place.

$(inputs).on('focus', function () {
    // repara que o focus dispara antes de fazer scroll 
    // e por isso o .scrollTop() pode ser errado! 
    var scroll = $(document).scrollTop();
    var input = this;
    setTimeout(function () {
        var scrollTardio = $(document).scrollTop();
        input.value = scrollTardio;
        console.log(scroll, scrollTardio); // valores diferentes!
    }, 10);
});

To scroll to the element, taking into account its height, you need to know the position of the element on the page and apply this to the scroll.

You can do it like this:

$(inputs).on('focus', function () {
    var pos = $(this).offset();
    $(document).scrollTop(pos.top);
});

jsFiddle: https://jsfiddle.net/vb7w4m51/1/