on focus of every input and every time scroll top

Question

<div class="gdbox">
   <input id="one" type="text"><br><br>
   <input id="two" type="text"><br><br>
   <input id="one" type="text"><br><br><input type="text">
</div>
  <script>
  $('input').on('focus',function(){
     var inputHeight=$('.gdbox input').height();
      $("html, body").animate({ scrollTop: inputHeight}, 600);
      return false;
   });
  </script>

now when ever i focus on the input body will scroll top it is working for only first time and one time focusing but i want "on focus of every input and every time body,html should scroll top some what see in fiddle"

Answer 1

You can use .offset().top for getting the top position of each element and then scroll it to top.

$('input').on('focus',function(){
    var inputHeight=$(this).offset().top;
    $("html, body").animate({ scrollTop: inputHeight}, 600);
    return false;
 });

$('input').on('focus',function(){
		var inputHeight=$(this).offset().top;
    $("html, body").animate({ scrollTop: inputHeight}, 600);
    return false;
 });

input{
  height:40px;
}

.gdbox
{
  height:600px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gdbox">
    <div id="gdb1" class="gdbutton fontwhitenshadow">Q</div>
    <input id="one" type="text"><br><br>
    <input id="two" type="text"><br><br>
    <input id="one" type="text"><br><br><input type="text">
</div>


<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam beatae quas esse explicabo modi odio nesciunt vero error obcaecati ea sequi alias quam facilis delectus odit aperiam repellat similique corrupti.</div>

Fiddle : https://jsfiddle.net/78ukreut/