Question

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

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

我正在寻找一个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);

    });
});

jQuery滚动页面，所以光标停留在“逻辑中心”

2 个答案: