使用jQuery滚动一个长的垂直表单答案

【问题标题】：Use jQuery to scroll a long vertical form使用jQuery滚动一个长的垂直表单
【发布时间】：2011-01-12 02:54:55
【问题描述】：

我的应用中有一个很长的垂直数据输入表单。当您浏览表单并到达页面可见部分的底部时，页面只会将当前焦点字段滚动到视图中（焦点始终保持在屏幕底部）。这很烦人，因为你永远看不到你要关注的下一个领域。我很想使用 jQuery 在获得焦点时自动将焦点字段滚动到窗口顶部（但只有在获得焦点之前它不在可见区域中时）。有人看过插件或知道如何让我开始吗？

【问题讨论】：

标签： javascript jquery window scroll

【解决方案1】：

有一个名为“scrollIntoView”的 HTML 元素方法可以完全满足您的需求。（可能不适用于旧版浏览器，但我使用 IE9、Firefox3 和 Chrome 对其进行了测试）。

或者，您可能会使用 jquery 的 .offset() 和 .scrollTop() 函数来获取/设置文档和手头元素的滚动位置。

    <script src="jquery-1.4.4.js"></script>
    <script>
        function OnFocus(evt) {
            this.scrollIntoView(true);
        }

        window.onload = function (evt) {
            $("input").focus(OnFocus);
        };

    </script>

</head>


<body>

<input type="text" id="text1" value="text1"/> <p>&nbsp;</p>
<input type="text" id="text2" value="text2"/> <p>&nbsp;</p>
<input type="text" id="text3" value="text4"/> <p>&nbsp;</p>
<input type="text" id="text4" value="text5"/> <p>&nbsp;</p>
<input type="text" id="text5" value="text6"/> <p>&nbsp;</p>
<input type="text" id="text6" value="text6"/> <p>&nbsp;</p>
<input type="text" id="text7" value="text7"/> <p>&nbsp;</p>
<input type="text" id="text8" value="text8"/> <p>&nbsp;</p>
<input type="text" id="text9" value="text9"/> <p>&nbsp;</p>
...
<input type="text" id="text34"/> <p>&nbsp;</p>

</body>

【讨论】：

scrollIntoView 始终将焦点字段保持在顶部，这并不是我想要的……尤其是因为我的字段标签位于文本框上方。

【解决方案2】：

虽然这不是我想要的，但我决定在页面的某些元素中添加以下内容。

function ScrollToTop(object) {
    $('html,body').animate({ scrollTop: $(object).offset().top - 30 }, 1000, 'linear');
}

然后在某些元素上：

 onfocus="ScrollToTop(this);"

我希望不对焦点事件进行硬编码。如果我可以绑定一个“scrollingIntoView”事件然后运行我的脚本，那就太好了。无论如何，我的解决方案既漂亮又优雅。

【讨论】：