jQuery - 点击scrollTop不起作用

Question

我试图在点击时向下滚动到div #drawer但没有任何反应。我的其余功能正常工作，它只是不会滚动。这是我的代码：

HTML：

            <img
              src="/imagecache/large/{{ $issue->first()->image  }}"
              onclick="{{ $function }}(
                '{{ $issue->first()->magazine->id }}',
                '{{ $issue->first()->magazine->name }}',
                '{{ $issue->first()->magazine->summary ?: '' }}',
                '{{ $issue->first()->magazine->image ?: '' }}',
                '{{ $issue->first()->image  }}'
                )"
              >

脚本：

function magazineDetail(id, name, summary, issueImage, magazineImage)

{
    images = [];
    nextImage = 0;
    loadedImages = [];

    $('#name').text(name);
    $('#summary').text(summary);
    $('#cover-image').attr({"src" : '/imagecache/cover/' + magazineImage, "alt" : name});

    if (issueImage != '') {
      $('#issueImage').html('<img src="/imagecache/medium/"' + issueImage + ' alt="' + name + '">');
    }

    $('html,body').animate({
       scrollTop: $("#magazine-detail").offset().top
    });

    $.getJSON("issue/images",
        { id: id },
        function(result){
          if (result.length < 2){
              $('.magazine-preview-nav').hide();
          } else {
              $('.magazine-preview-nav').show();
          }
          $.each(result, function(i, value){
              images.push(value);
          });
          function imagePreload() {
              preload();
          };
    });
}

这是我的html结构：

         <div id="app">
            <div id="bg">
            </div>

              @section('topBar')
                @include('customer.layouts.partials.top-bar')
              @show
            <div id="main-section">
              @section('header')
                @include('customer.layouts.partials.header')
              @show

              @section('carousel')
                @include('customer.layouts.partials.carousel', ['function' => 'magazineDetail', 'carouselPadding' => ''])
              @show
            </div>


            <div id="drawer">
              <div id="magazine-detail">
                @section('magazine-detail')
                  @include('customer.layouts.partials.magazine-detail')
                @show
              </div>
              <div id="magazine-detail-carousel">
                @section('magazine-detail-carousel')
                  @include('customer.layouts.partials.carousel', ['function' => 'magazineDetail', 'carouselPadding' => 'carouselPadding'])
                @show
              </div>
            </div>
          </div>

和css：

#main-section {
  top: 92px;
  height: 100vh;
  width: 100%;
  overflow-y: scroll;
}

#drawer {
  height: calc(100vh - 92px);
  width: 100%;
  background-color: $white;
  padding-left: 15px;
  padding-right: 15px;
}

html, body {
  height: 100%;
  position: relative;
  overflow-y: scroll;
  overflow-x: hidden;
}

当我这样做时

console.log($("#magazine-detail").offset().top);

它给了我正确的值，在我的情况下是967

更新

我成功地解决了这个问题：

$('#drawer')[0].scrollIntoView( false );