由于固定的底部页脚，按 Tab 键时页面不会向上滚动

Question

我在网页中有一个长表格。底部有一个带有 z-index:999 的固定页脚。当我按下 Tab 键并从一个字段移动到另一个字段时，然后在页面底部，焦点会转到隐藏在页脚后面的字段。对于这些字段，页面不会向上滚动。一旦焦点低于这些字段，页面就会向上滚动（这是合乎逻辑的）。但是，当焦点位于隐藏在固定页脚后面的字段时，有没有办法向上滚动页面？The issue is demonstrated in the image.

.footer {
background: none repeat scroll 0 0 #f5f5f5;
border-top: 1px solid #e5e5e5;
bottom: 0;
height: 45px;
left: 0% !important;
line-height: 40px;
position: fixed;
right: 0;
text-align: center;
width: 100% !important;
z-index: 999;
}

更新了 JSFiddle 中的字段名称以便更好地理解：https://jsfiddle.net/2hgo3zo1/3/

我更新了 jsfiddle 这样字段标签就不同了。打开 fiddle 后，焦点位于电子邮件地址字段，密码 1 文本框在我的屏幕上可见。复制我的问题的步骤：

焦点位于电子邮件地址字段。我开始按 Tab 键。
当我到达密码 1 文本框时，我再次按 Tab。
焦点在电子邮件地址 2 的文本框上。但是文本框不可见。
现在输入 'abc'（不按 Tab 键）
再次按 Tab 键，密码 2 文本框处于焦点状态，现在页面自行向上滚动。
请注意，尽管文本框不可见，但电子邮件地址 2 字段包含文本 abc。
现在我想要的是当焦点位于电子邮件地址 2 的文本框时页面滚动（这不会自动向上滚动，因为固定页脚不在页面高度中考虑。）

Answer 1

请尝试 padding-bottom: 45px;在正文标签中

Answer 2

@Izafa 检查这个答案，在你的 fiddle 中我找不到像那个截图那样的问题。无论如何，您可以尝试将顶部和页脚 div 放在不同的类:

.topDiv {
  padding-bottom: 40px;
}
.footer {
background: none repeat scroll 0 0 #f5f5f5;
border-top: 1px solid #e5e5e5;
bottom: 0;
height: 45px;
left: 0% !important;
line-height: 40px;
position: fixed;
right: 0;
text-align: center;
width: 100% !important;
z-index: 999;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="topDiv">
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
 <div class="container-fluid">
      <div class="navbar-header">
        <a href="#">Brand</a>
      </div>
      <div>
        <ul class="nav navbar-nav">
          <li class="active">
           <a href="#">Home</a>
          </li>
        </ul>
      </div>
 </div>
 </nav>
  <div>
    <div class="container" style="padding-top: 80px; padding-bottom: 50px;">
      <form role="form">
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input autofocus="" type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputEmail2">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword2">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputFile">File input</label>
          <input type="file" id="exampleInputFile">
          <p class="help-block">Example block-level help text here.</p>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox"> Check me out
          </label>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>
  </div>
  
</div>

 <div class="footer">
    Fixed footer
   </div>

Answer 3

$(document).ready(function(){
 
 $("input").keydown(function (e) {
   if (e.which == 9){
    var center = $(window).height()/2;
    var top = $(this).offset().top ;
    if (top > center)
        $(window).scrollTop(top-center);
  }
 });
 });

.footer {
background: none repeat scroll 0 0 #f5f5f5;
border-top: 1px solid #e5e5e5;
bottom: 0;
height: 45px;
left: 0% !important;
line-height: 40px;
position: fixed;
right: 0;
text-align: center;
width: 100% !important;
z-index: 999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div>
  <nav class="navbar navbar-default" role="navigation">
 <div class="container-fluid">
      <div class="navbar-header">
        <a href="#">Brand</a>
      </div>
      <div>
        <ul class="nav navbar-nav">
          <li class="active">
           <a href="#">Home</a>
          </li>
        </ul>
      </div>
 </div>
 </nav>
  <div>
    <div class="container" style="padding-top: 80px; padding-bottom: 50px;">
      <form role="form">
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input autofocus="" type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address 1</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password 1</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address 2</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password 2</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address 3</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password 3</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address 4</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password 4</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputEmail2">Email address 5</label>
          <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword2">Password 5</label>
          <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputFile">File input</label>
          <input type="file" id="exampleInputFile">
          <p class="help-block">Example block-level help text here.</p>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox"> Check me out
          </label>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>
  </div>
   <div class="footer">
    Fixed footer
   </div>

Answer 4

搜索了几天，并使用了@ChanderShekhar 发布的jQuery，下面给出了最适合我的最终脚本块：

<script type="text/javascript">
 jQuery(document).ready(function(){
  jQuery('input, button, a, textarea, span').focus(function () {
    var footerHeight = 120; //footerHeight = footer height + element height + buffer
    var element = jQuery(this);
    if (element.offset().top - (jQuery(window).scrollTop()) > 
         (jQuery(window).height() - footerHeight)) {
        jQuery('html, body').animate({
            scrollTop: element.offset().top - (jQuery(window).height() - footerHeight)
        }, 500);
     }
  });
});
</script>

Answer 5

将此脚本添加到您的脚本文件中，这将为您提供更可靠和准确的解决方案，谢谢，请评价我的解决方案。

$('input').focus(function() {
var ele = $(this);
$('html, body').animate({
    scrollTop: ele.offset().top - 80
}, 800);

});

Answer 6

我实际上使用了提供的但对其进行了一些更改。

我使用的是 bootstrap-select，这需要我更改事件处理程序，但更重要的是，我不喜欢用户单击页面上更高处的字段时向上滚动所导致的用户体验.

当您 tabbed/clicked 试图通过滚动将字段强制到视图中的特定位置时，这导致了一个尴尬的来回运动。通常该位置是基于 footerHeight 的页面底部，因此返回到更高的字段将其放回底部。

如果他们使用固有的浏览器定位切换到视图之外的地方，这个选项将向上滚动，这对我来说很好。

if ($('div.activate-auto-scroll').length) {
    $(document).on('focus', 'input, button, a, textarea, span, select', function () {
        var footerHeight = 300; //footerHeight = footer height + element height + buffer
        var element = $(this);
        var formPosition = element.offset().top;
        var viewableArea = $(window).height() - footerHeight;
        var screenPosition = this.getBoundingClientRect().top;
        var scrollDestination = formPosition - viewableArea;

        if (formPosition > viewableArea && screenPosition > formPosition - scrollDestination) {  // second conditional stops it from scrolling up and causing the page to force fields to the bottom
            $('html, body').animate({
                scrollTop: scrollDestination
            }, 500);
        }
    });
}

由于固定的底部页脚，按 Tab 键时页面不会向上滚动

On pressing tab key the page does not scroll up due to fixed bottom footer

html

css

jquery

layout

footer