焦点或标签键上的输入按下，移动到屏幕中心

Question

我有许多表单域跨越页面折叠。当按下“tab”键来遍历每个输入/选择字段时，它位于页面底部的下一个字段。

我的一些领域有工具提示，验证响应和自动建议框出现在字段下方。当切换到该字段时，您无法在页面折叠下看到这些元素。

是否有一个javascript或jQuery脚本，可以垂直居中焦点输入/ textarea/select/button字段而不是对齐到底部的屏幕？

Answer 1

您可以绑定到焦点事件，然后计算字段的偏移量并将其居中在屏幕上。

$(':input').focus(function(){ 
    var center = $(window).height()/2; 
    var top = $(this).offset().top ; 
    if (top > center){ 
     $(window).scrollTop(top-center); 
    } 
}); 

Answer 2

最简单的事情将是包括jQuery ScrollTo plugin和jQuery Viewport插件。

然后将每个输入+相关的其他元素（验证响应，....）包装在一个div中。

重点检查div是否完全可见，如果不使用scrollTo。完成。

当然这有点膨胀，但如果你可以忍受2个更多的依赖和一个额外的〜4kb这应该工作，而不需要自己做计算。

Answer 3

从上面平滑滚动效果

$(':input').focus(function() { 
     var center = $(window).height()/2; 
     var top = $(this).offset().top; 
     if (top > center) { 
      $('html, body').animate({ scrollTop: top - center }, 'fast');    
     } 
    });