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

Question

我在网页中有一个长表单。有一个z-index的固定页脚：底部为999。当我按Tab键并从一个字段移动到另一个字段时，在页面底部，焦点会出现在隐藏在页脚后面的字段中。该页面不会向上滚动这些字段。一旦焦点落在这些字段下面，页面就会向上滚动（这是合乎逻辑的）。但是当焦点位于隐藏在固定页脚后面的字段上时，是否有办法向上滚动页面？在的jsfiddle 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; 
} 

更新的字段名称为更好地理解：https://jsfiddle.net/2hgo3zo1/3/

的让字段标签不同我已经更新了的jsfiddle。一旦我打开小提琴，焦点在电子邮件地址字段上，并且密码1文本框在我的屏幕上可见。重复我的问题的步骤：

1. 重点是电子邮件地址字段。我开始按标签。
2. 当我到达密码1文本框时，我再次按Tab键。
3. 重点是电子邮件地址2的文本框，但文本框不可见。
4. 现在键入'abc'（没有按tab）
5. 再次按Tab键，密码2文本框处于焦点状态，现在页面自动滚动。
6. 请注意，虽然文本框不可见，但电子邮件地址2字段具有文本abc。
7. 现在我想那是什么时候的重点是电子邮件地址2的文本框的页面滚动（如固定页脚没有在页面高度考虑，这是不会自动向上滚动。）

Answer 1

搜索天后，并且使用jQuery发表@ChanderShekhar ，对我来说完美工作的最终脚本块如下：

<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 2

请尝试填充-bottom：45px; in body tag

Answer 3

add clear：both;它应该为你工作，因为你没有上传你的HTML代码，但试试这个，让我现在感谢

Answer 4

@Izafa检查这个答案，在你的小提琴中，我找不到像那个scrnshot的问题。反正你可以尝试把顶部和页脚的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"> 
 
\t <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
     <a href="#">Brand</a> 
 
     </div> 
 
     <div> 
 
     <ul class="nav navbar-nav"> 
 
      <li class="active"> 
 
      \t <a href="#">Home</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
\t </div> 
 
\t </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 5

$(document).ready(function(){ 
 
\t 
 
\t $("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); 
 
\t \t } 
 
\t }); 
 
\t });

.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"> 
 
\t <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
     <a href="#">Brand</a> 
 
     </div> 
 
     <div> 
 
     <ul class="nav navbar-nav"> 
 
      <li class="active"> 
 
      \t <a href="#">Home</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
\t </div> 
 
\t </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 6

将此脚本添加到您的脚本文件中，这将为您提供更可靠和准确的解决方案，并对我的解决方案进行评分。

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

}）;