タブキーを押すと、下のフッターが固定されているためページが上にスクロールしません

ウェブページに長いフォームがあります。 Zインデックス付きの固定フッターがあります。下部に999です。タブを押してあるフィールドから別のフィールドに移動すると、ページの下部にフォーカスが移動し、フッターの後ろに隠れているフィールドが表示されます。これらのフィールドのページは上にスクロールしません。フォーカスがこれらのフィールドの下になると、ページは（論理的なように）スクロールアップされます。しかし、固定フッタの後ろに隠れているフィールドに焦点が当てられているときにページをスクロールする方法はありますか？フィールドのラベルが異なるように、私はjsfiddleを更新しましたhttps://jsfiddle.net/2hgo3zo1/3/タブキーを押すと、下のフッターが固定されているためページが上にスクロールしません

：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のフィールド名を更新しました。私がフィドルを開くと、電子メールアドレスフィールドにフォーカスがあり、パスワード1のテキストボックスが画面に表示されます。問題を再現する手順：

フォーカスはメールアドレス欄にあります。私はタブを押し始める。
パスワード1のテキストボックスに達すると、もう一度タブを押します。
電子メールアドレス2のテキストボックスにフォーカスがありますが、テキストボックスは表示されません。
'abc'（タブを押さずに）
もう一度Tabキーを押すと、パスワード2のテキストボックスにフォーカスが当てられ、ページがスクロールアップします。
テキストボックスは表示されませんが、電子メールアドレス2のフィールドにはテキストabcが表示されています。
は、今私が何をしたいの焦点はメールアドレス2のテキストボックスの上にあるページをスクロールするとき（固定フッターがページの高さでは考慮されていないとして、これは自動的にスクロールされません。）ということである

出典

2017-07-17 Izafa Khan

コードください.... – Vishnu

@Vishnu CSSを追加しました。 –

plsはスニペットやhttps：// jsfiddleにhtml＆cssコードを追加します。net /それ以外の場合は問題が見つかりません – Vishnu

を、とjQueryを使用して：とにかく、あなたは別のクラスでトップとフッターのdivを置くことを試みることができます最終的なスクリプトブロックは、私のために完全に機能しました。

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

出典

2017-07-18 20:10:46

パディングをしてみてください - 下：45ピクセル。ボディー・タグ内

出典

2017-07-17 09:44:50

パディングボトムは既にあります。これは、ページが下にスクロールされたときに機能します。しかし、そのページはまだ底にはない。 –

-1

add clear：both;それはあなたのHTMLコードをアップロードしていないとして、これを試してみて、今私に感謝させるようにあなたのために働くはずです

出典

2017-07-17 10:23:30 Bangash

JSFiddleが追加されました。 –

@ Bangash-ご返信ありがとうございます。しかし、それはうまくいかなかった。 –

このスクリプトをスクリプトファイルに追加してください。これにより、より信頼性の高い正確なソリューションが得られます。 $（ '入力'）フォーカス（関数（）{ \t VAR ELE = $（この）; $（ 'HTML、本体'）アニメーション（{ scrollTopスプライト：。。。ele.offset（）トップ - 80 }、800）; }）; – Bangash

@Izafa私のscreamshotのような問題を見つけることができません。 @ChanderShekharによって投稿日間検索した後

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

出典

2017-07-17 10:58:02 Vishnu

上記の編集済みの回答を参照して、私の要件を理解するステップを理解してください。 –

$(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>

出典

2017-07-18 09:42:43

私はJSFiddle https://jsfiddle.net/chandershekhar/4r8eow2z/ –

参照の上、それを発見したjQueryを使ってそれを試してみてください、これはなく、ある程度、働いていました。全画面形式では、ページの後半のフィールドのページが不必要にスクロールアップしていました。フィールドはすでに見えていましたが。 –

おかげ@ChanderShekharにstackoverflowの –

このスクリプトをスクリプトファイルに追加してください。これにより、より信頼性の高い正確なソリューションが提供され、私のソリューションは評価されます。

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

}）;

出典

2017-07-20 05:46:16 Bangash

タブキーを押すと、下のフッターが固定されているためページが上にスクロールしません

答えて

関連する問題