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>

现在，当我专注于输入体时将滚动顶部它仅工作第一次和一次聚焦但我希望＆＃34;在每个输入的焦点和每次身体时，html应滚动顶部一些{ {3}}＆＃34;

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/

每个输入的焦点和每次滚动顶部

1 个答案: