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

时间：2017-07-17 09:31:37

标签： jquery html css layout footer

我在网页上有一个很长的表格。有一个固定的页脚，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，以便字段标签不同。打开小提琴后，重点是电子邮件地址字段，屏幕上会显示密码1文本框。复制我的问题的步骤：

  1. 专注于电子邮件地址字段。我开始按Tab键。
  2. 当我到达密码1文本框时，我再次按Tab键。
  3. 重点是电子邮件地址2的文本框。但文本框不可见。
  4. 现在输入＆＃39; abc＆＃39; （不按标签）
  5. 再次按Tab键，密码2文本框处于焦点，现在页面自动向上滚动。
  6. 请注意，虽然文本框不可见，但电子邮件地址2字段的文本为abc。
  7. 现在我想要的是当焦点位于电子邮件地址2的文本框上时页面会滚动（这不会自动向上滚动，因为页面高度不考虑固定页脚。）

6 个答案:

答案 0 :(得分：1)

＆＃13;
＆＃13; 
$(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);
		}
	});
	});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

在搜索了几天之后，使用@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>

答案 2 :(得分：0)

请尝试填充底部：45px;在身体标签

答案 3 :(得分：0)

@Izafa检查这个答案，在你的小提琴中我找不到像scrnshot这样的问题。无论如何，你可以尝试将top和footer div放在不同的类中：

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

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

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

}）;

答案 5 :(得分：0)

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

我正在使用bootstrap-select，这需要我更改事件处理程序，但更重要的是，我不喜欢用户单击页面上方的字段时向上滚动导致的UX。

当您选择/单击字段时，这会导致笨拙的来回运动，因为它试图通过滚动将字段强制到视图中的特定位置。通常，该位置是基于footerHeight的页面底部，因此返回较高的字段会将其放回底部。

如果他们使用固有的浏览器位置将标签切换到视线之外的地方，则此选项将向上滚动。

result = np.empty_like(values)
result[:] = np.nan
valid_indices = ~np.isnan(order)
result[order[valid_indices].astype(int)] = values[valid_indices]
相关问题
最新问题