jQueryがトグルして上に移動する

Question

<script> 
    $(document).ready(function() { 
     $('.start').click(function() { 
      $('.startHere').fadeToggle("fast"); 
     }); 
    }); 
    $(document).ready(function() { 
     $(".toggle").click(function() { 
      $('.childtoggle').not($(this).find(".childtoggle")).hide(500); 
      $(this).find(".childtoggle").slideToggle(500); 
     }); 

     $(".childtoggle").click(function(event) { 
      event.stopPropagation(); 
     }); 

     $(".gonext").click(function(e) { 
      e.stopPropagation(); 
      if ($(this).parent().parent().next(".toggle").html() != undefined) 
       $(this).parent().parent().next(".toggle").trigger("click"); 
      else 
       $(".toggle").first().trigger("click"); 

     }); 
    }); 
</script> 

そのコードは単純なことをしています。別のdivをクリックすると、次のdivを閉じて開きます。だから私は決して1つ以上のdivを開けたことはありません。

しかし、私がしたいのは、新しいdivを切り替えるたびに、画面がdivsの上に移動することだけです。場合によっては、これらのdivの高さが画面よりも高く、スクロールがdivの途中にあります。

Answer 1

clickイベント後にhttps://api.jquery.com/scrollTop/を試してみてください。このような

何か：

$('html, body').animate({scrollTop:$('#YOUR_DIV_ID').position().top}, 'slow'); 

Answer 2

.slideToggle方法は<div>の高さを変更するので、あなたはそれが終わった後までスクロール位置を設定することはできませんアニメーションを開始します。しかし、ビットを感じるかもしれない、すべてのアニメーションを完了するために約1秒かかりますこと

$('.toggle').click(function() { 
    var $current = $(this).find('.childtoggle'); 

    $('.childtoggle').not($current).hide(500, function() { 

     // After hiding the children show the current 
     $current.slideToggle(500, function() { 

      // After showing the current scroll to it 
      $('body').scrollTop($current.position().top); 
     }); 
    }); 
}); 

：これはようなものになるだろうあなたのコードに適用さ

function scrollToDiv() { 
    $('#outerWrapper').scrollTop($(this).position().top); 
} 

$yourDiv.slideToggle(500, scrollToDiv); 

（一部の当て推量で）：これを試してみてくださいユーザーにとって大変ですより良い選択肢は、ページが読み込まれた後にすべてのが折りたたまれた後のposition().topを把握し、そのキャッシュされた値を使用してスクロールすることです。