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

显示：无表示该元素在页面中没有位置。因此滚动不会滚动。

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

Answer 2

您需要使用#comments显示.offset().top以获取.show()，然后使用.hide()隐藏它。

见这个例子：

<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>

切换后ScrollTop无法正常工作

2 个答案: