ScrollTop在切換後不工作

Question

無法理解，它爲什麼不滾動到元素。

<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

你需要顯示#comments使用.show()然後用.hide()隱藏獲得.offset().top。

見這個例子：

<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

顯示：none表示該元素在頁面中沒有位置。因此，滾動不滾動。

參考：https://bugzilla.mozilla.org/show_bug.cgi?id=211236