jQuery滾動頁面，所以光標停留在「邏輯中心」

Question

我有一個巨大的html窗體，有近350個控件，需要5-6倍的用戶屏幕高度。 用戶從頁面開始處開始完成每個輸入字段並繼續。 一旦光標靠近屏幕底部用戶必須能夠看到一些下一個輸入字段，所以這裏是問題： 我想避免滾動條的使用。 我想設置一些「margines」（比如200像素的每一頁邊）

如果用戶點擊一個控件，靠近屏幕邊緣，這裏這種機制也必須工作

我在找一個jQuery解決方案

玩弄jQuery.ScrollTo，但無法弄清楚如何將我的邏輯嵌入到代碼中。

Answer 1

這應該這樣做

http://jsfiddle.net/JsWnk/

$(document).ready(function() { 

    $('input').focus(function() { 

     var padding = 100; // Desired page "padding" 

     var lbound = $(this).offset().top - $(window).height() + padding; 
     var ubound = $(this).offset().top - padding; 

     if ($(window).scrollTop() < lbound) 
      $(window).scrollTop(lbound); 
     else if ($(window).scrollTop() > ubound) 
      $(window).scrollTop(ubound); 

    }); 
}); 
​ 

Answer 2

像這樣的東西應該工作...

http://jsfiddle.net/q9QHQ/

$(document).ready(function() { 

    $('input').focus(function() { 

     if ($(this).offset().top > 100) 
      $(window).scrollTop($(this).offset().top + 100); 

    }); 
});