title: jQuery - on click scrollTop doesn't work
body: <p>I am trying to scroll down to a div #drawer on click but nothing happens.The rest of my function works normally, it just won't scroll. This is my code:</p>
  
  <p>Html:</p>
  
  <pre><code>            &lt;img
                src="/imagecache/large/{{ $issue-&gt;first()-&gt;image  }}"
                onclick="{{ $function }}(
                  '{{ $issue-&gt;first()-&gt;magazine-&gt;id }}',
                  '{{ $issue-&gt;first()-&gt;magazine-&gt;name }}',
                  '{{ $issue-&gt;first()-&gt;magazine-&gt;summary ?: '' }}',
                  '{{ $issue-&gt;first()-&gt;magazine-&gt;image ?: '' }}',
                  '{{ $issue-&gt;first()-&gt;image  }}'
                  )"
                &gt;
  </code></pre>
  
  <p>And script:</p>
  
  <pre><code>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('&lt;img src="/imagecache/medium/"' + issueImage + ' alt="' + name + '"&gt;');
      }
  
      $('html,body').animate({
         scrollTop: $("#magazine-detail").offset().top
      });
  
      $.getJSON("issue/images",
          { id: id },
          function(result){
            if (result.length &lt; 2){
                $('.magazine-preview-nav').hide();
            } else {
                $('.magazine-preview-nav').show();
            }
            $.each(result, function(i, value){
                images.push(value);
            });
            function imagePreload() {
                preload();
            };
      });
  }
  </code></pre>
  
  <p>This is my html structure:</p>
  
  <pre><code>         &lt;div id="app"&gt;
              &lt;div id="bg"&gt;
              &lt;/div&gt;
  
                @section('topBar')
                  @include('customer.layouts.partials.top-bar')
                @show
              &lt;div id="main-section"&gt;
                @section('header')
                  @include('customer.layouts.partials.header')
                @show
  
                @section('carousel')
                  @include('customer.layouts.partials.carousel', ['function' =&gt; 'magazineDetail', 'carouselPadding' =&gt; ''])
                @show
              &lt;/div&gt;
  
  
              &lt;div id="drawer"&gt;
                &lt;div id="magazine-detail"&gt;
                  @section('magazine-detail')
                    @include('customer.layouts.partials.magazine-detail')
                  @show
                &lt;/div&gt;
                &lt;div id="magazine-detail-carousel"&gt;
                  @section('magazine-detail-carousel')
                    @include('customer.layouts.partials.carousel', ['function' =&gt; 'magazineDetail', 'carouselPadding' =&gt; 'carouselPadding'])
                  @show
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  </code></pre>
  
  <p>And css:</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>When I do </p>
  
  <pre><code>console.log($("#magazine-detail").offset().top);
  </code></pre>
  
  <p>It gives me the correct value, which was in my case 967</p>
  
  <p><strong>Update</strong></p>
  
  <p>I managed to get it working with this:</p>
  
  <pre><code>$('#drawer')[0].scrollIntoView( false );
  </code></pre>