html - 在输入字段中切换时，底部的固定栏显示在我切换到的字段顶部

Question

我基本上有这个输入字段列表，我使用选项卡跳过它们并一一填写。在屏幕底部，我有一个包含一些聊天功能的固定 div。

问题是，当我在字段中切换并到达页面底部时，我切换到的字段可能位于固定聊天栏下方。这会导致输入字段被选中，但我看不到它，因为它在聊天栏后面。

我希望这对您有意义，我附上了问题的截屏视频。您会看到我在各个字段之间切换，当我在底部时，重点字段位于聊天栏后面。

http://www.screencast.com/users/roman776/folders/Jing/media/350949d3-f709-45bf-97b8-438291665088

我是否可以将 CSS 属性应用于固定底部栏，以确保当我关注其下方的内容时它会向下移动页面？

非常感谢。

Answer 1

您可以使用名为“jQuery.ScrollTo”的简洁小 jQuery 插件。我已经为你编写了一个例子here基本上每次输入获得焦点时，它都会将页面滚动 10 像素:

$("input").each(function(){
    $(this).focus(function(){$.scrollTo('+=10px');});
}); 

有很多选项，请查看 here

玩得开心!

更新:为最后一个元素添加了填充以确保它显示