對每一個輸入和每一次滾動頂部

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> 

現在當過我專注於輸入身體會滾動頂部，它正在爲僅第一次和一個時間集中，但我想「在每個輸入和每一個重點

的焦點時間機構，HTML應滾動頂部一些什麼see in fiddle「

Answer 1

您可以使用.offset（）。頂部獲取每個元素的頂部位置，然後將其滾動到頂部。

$('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>

小提琴：https://jsfiddle.net/78ukreut/