Javascriptは固定ヘッダーで大きなdivにフォーカスしています

Question

私はhtmlのdiv要素へのスクロールをアニメートするために '$.scrollTo'という小さなライブラリを使用しています。私のページの上部には固定されたナビゲーションバーがあります。 アニメーションの最後に、私はそのdivに焦点を当てて（アクセシビリティのために）したいと思います。私のdivが大きくなると、アニメーションの終わりに、フォーカスを得るという事実が、画面からちょっと離れたところに送られます。

これは小さなdivでは発生しません。ここ

は私のコード（以下jsfiddleチェック）である：ここ

$('#buttonid').on("click", function() { 

//fixed nav bar height (to compensate when scrolling) 
var fixed_navbar_height = $("#navbar-id").height(); 

//the element to scroll to 
var $go_to_selector = $("#topic2"); 

$.scrollTo($go_to_selector, { 
    duration: 1000, 
    offset: -fixed_navbar_height, 
    onAfter: function() { 
    //if you comment out this .focus it works as intended. 
    $go_to_selector.focus(); 
    } 
}); 
}); 

はJSFIDDLE例です。 https://jsfiddle.net/dy35obpq/3/

は明らかにonAfterはそれを台無しに、しかし、私はアニメーションとフォーカスの両方を希望します。スクロールバーを変更せずに大規模なdivにフォーカスを実装する方法に関するアイデアですか？提案は歓迎以上のものです。

Answer 1

これを試してください。

onAfter: function() { 
    $go_to_selector.focus(); 
    $(window).scrollTop($($go_to_selector).offset().top - fixed_navbar_height); 
    } 

私はこのonAfterコールバックにこの行を追加しました。 $(window).scrollTop($($go_to_selector).offset().top - fixed_navbar_height);

まだフォーカスを保っているうちに問題を修正したようです。フォーカスブルーのハイライトを無効にするには、cssを使用します。