на фокусе каждого входа и при каждом прокрутке вверх

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> 

Теперь, когда я сосредоточусь на корпусе ввода, прокрутит вверх, он работает только в первый раз и один раз, но я хочу «на фокусе каждого входа и каждого time body, html должен прокрутить вверх некоторые из них: see in fiddle "

Answer 1

Вы можете использовать .offset(). top для получения верхнего положения каждого элемента, а затем прокрутки его вверх.

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

$('input').on('focus',function(){ 
 
\t \t 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/