フローティングナビゲーションバーを使用した要素IDのJavaScript Focus（）？

Question

フォームの検証時に、必要なフィールドにユーザーに入力を求めるプロンプトが表示されます。

通常です。あなたがに集中したい要素が最初のものであるときに、画面の上部に浮いナビゲーションバーを扱う場合

document.getElementById("idHere").focus(); 

、これは常に動作しない、主に、それは、フローティングナビゲーションの後ろに隠します。

フォーカスを設定した数のピクセルを下に移動して、ナビゲーションメニューのサイズを考慮していることを確認する便利な方法はありますか？

Answer 1

スクロール機能を関数またはonFocus要素に追加する必要があります。 このようになる可能性があります：

window.scrollTo(window.scrollX , document.getElementById("idHere").scrollTop + 80); 

Answer 2

ここでは、jQuery関数としての解決策を示します。セレクタを使用するには、どのような要素でも動作させたいセレクタを渡します。例bindFocusScroll('input, select');

function bindFocusScroll(selector){ 
    var navHeight = 192; 
    var padding = 25; 
    $(selector).on('focus', function() { 
    try { 
     var elemTop = $(this).offset().top; 
     var maxVisible = $(document).scrollTop() + navHeight; 
     if (elemTop < maxVisible) { 
     $("html, body").animate({ scrollTop: elemTop - navHeight - padding }, 250); 
     } 
    } catch (e) { 
     console.log("Error: " + e); 
    } 
    }); 
} 

のためには、アニメーションやあなただけのササンの答えを使用することができますスマートであることを、それを必要としない場合。必要に応じて、この回答をvanilla JSで再作成するのを手助けすることもできます。