ScrollTop funktioniert nicht nach Toggle

Question

Kann nicht verstehen, warum es nicht zum Element scrollt.

<div class="h3 showhide">...</div> 
<div id="comments" class="inv" style="display:none;">...</div> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.main-content').on('click', '.showhide', function() { 
      $(".inv").toggle("slow"); 
      $('html, body').stop(true, true).animate({ 
       scrollTop: $('#comments').offset().top 
      }, 500); 
      return false; 
     }); 
    }); 
</script> 

Answer 1

Sie müssen #comments anzuzeigen .offset().top zu bekommen mit .show() es dann verstecken .hide() verwenden.

Sehen Sie folgendes Beispiel:

<script type="text/javascript"> 
    $(document).ready(function() { 
    var comments_top = $('#comments').show().offset().top; 


    $('.main-content').on('click', '.showhide', function() { 
     if ($('#comments').is(":hidden")) { 
     comments_top = $('#comments').show().offset().top; 
     $('#comments').hide(); 
    } 
     $(".inv").toggle("slow"); 
     $('html, body').stop(true, true).animate({ 
     scrollTop: comments_top 
     }, 500); 
     return false; 
    }); 
    }); 
</script> 

Answer 2

Anzeige: Keine bedeutet, dass das Element keine Position auf der Seite hat. Daher scrollt scroll nicht.

Referenz: https://bugzilla.mozilla.org/show_bug.cgi?id=211236