焦點或標籤鍵上的輸入按下，移動到屏幕中心

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');    
     } 
    });