关注每个输入和每次滚动顶部

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().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>

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