トグルブロックにフォーカスを当てたブラウザの位置

Question

コンテンツを開くためのブロックとボタンがいくつかあります。私がボタンを押すと、ブロック内のすべてのコンテンツがブロックされますが、画面はフォーカスされたままです。

（予想通り）ブラウザ画面は、ブラウザの一番下まで移動し、バッククローズドブロックの先頭に行くのdoesnt - しかし、私はブロックの一番下までスクロールし、モードを非表示に戻ってそれを切り替えるには、ボタンを押したとき

$('.ul' + l).append('<button type="button" onclick="$(this).myFunc()">Button</button>'); 

      $.fn.myFunc = function() { 
      var ul = $(this).parent().attr('class'); 
      $('.' + ul + ' li:gt(5)').fadeToggle("fast"); 
         }; 

私はいくつか$(window).focusものを試してみましたが、fadeToggle("fast").preventDefault()などを追加しましたが、何も助けませんでした。何か案は？

Answer 1

あなたが必要なものを行うための最も簡単な方法は、ネイティブscrollIntoView()方法です：

document.querySelector('.ul' + l).scrollIntoView({ 
    behavior: 'smooth' 
}); 

これは、すべての主要なブラウザのcurrent versionsでサポートされていますが、例えば、以下の古いブラウザ（IE 10とのサポートが必要な場合）polyfillを使用することができます。

以下のコメントには：documentオブジェクトがありますが、私は約束します：documentはすべてのウェブページの基礎となります。それはあなたがしたい場合は、代わりにjQueryのセレクタを使用することができると述べていますが、scrollIntoViewを使用することができます前に、基礎となるDOMオブジェクトを取得する必要があります（それはjQueryの方法ではないので。）

$('.ul' + l)[0].scrollIntoView({...});