javascript - jQuery滚动页面，使光标停留在“逻辑中心”

Question

我有一个巨大的 html 表单，有近 350 个控件，占用户屏幕高度的 5-6 倍。用户从页面的开头开始填写每个输入字段并继续。一旦屏幕底部附近的光标丰富，用户必须能够看到一些下一个输入字段，所以这里是问题：我想避免使用滚动条。我想设置一些“边距”（比如每页边 200 像素）

如果用户单击屏幕边缘附近的控件，则此机制也必须起作用

我正在寻找一个 jQuery 解决方案

玩弄 jQuery.ScrollTo，但不知道如何将我的逻辑嵌入到代码中。

Answer 1

像这样的东西应该工作......

http://jsfiddle.net/q9QHQ/

$(document).ready(function() {

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

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

    });
});

Answer 2

这应该这样做

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

    });
});
​