jQuery function scrollTop doesn't work correctly when using Twitter Bootstrap

Question

I have a situation where I am loading content into a overlay window and sometimes it will have a scroll applied with overflow-y: auto; and if users scroll and then click the button again I would like the scroll to go back to the top, not where they last left it.

This works fine without using Bootstrap, but once you start using bootstrap methods to show/hide a overlay window it doesn't work.

Specifically this is what doesn't work:

$('#preview .main').scrollTop(0);

However, for whatever reason this does work:

$('#preview .main').scrollTop(1);

I have read this question but I am not using bootstrap modals, so it doesn't really apply to me; I also read this question but the accepted answer didn't work for me.

Sample code:

HTML

<section class="row collapse" id="preview">
      <div class="wrapper">
            <div class="side col-xs-2">

            </div>
            <div class="main col-xs-4">
                  <div class="content_wrapper">
                        <div class="loader">
          loading...
                        </div>
                        <div class="content post">

                        </div>
                  </div>
            </div>
      </div>
</section>

<input type="button" id="btn" value="Click Me!" data-toggle="collapse" data-target="#preview">

<input type="button" id="hide" value="Hide Content" data-toggle="collapse" data-target="#preview">

CSS

#preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0;
    z-index: 2000;
    background-color: #fff;
}

#preview .wrapper {
    display: table;
    width: 100%;
    padding: 0 !important;
    border-left: 1px solid #F2F2F2;
    border-right: 1px solid #F2F2F2;
    border-bottom: 1px solid #F2F2F2; 
}

#preview .side {
    display: table-cell;
    text-align: center;
    height: 200px;
    padding: 10px 30px 15px 30px;   
    vertical-align: top;
    background-color: #FAFAFA;
}

#preview .main {
    display: table-cell;
    height: 200px;
    max-height: 200px;
    padding: 10px 13px 16px 13px;   
    vertical-align: top;
    overflow-y: auto;
}

#preview .main .content_wrapper {
    padding-bottom: 32px;
    line-height: 1.5;
}

#preview .main .content_wrapper .loader {
    text-align: center;
}

#preview .main .content_wrapper .loader p {
    margin-top: 15px;
    font-weight: bold;
}

#preview .main .content_wrapper .content {
    display: none;
}

#btn {
  margin-top: 210px;
}

JS

$('#btn').click(function() {
    var content_el = $('#preview .main .content_wrapper .content'); 
    var loader_el = $('#preview .loader');

    content_el.hide();
    loader_el.show();

    // Set the content
    content_el.html('some content here...');

    loader_el.hide();

    // Show the content area
    content_el.show();

    // Reset the scroll position of preview window
    $('#preview .main').scrollTop(0);  

});

CodePen: http://codepen.io/anon/pen/rVzppz

Having to set it to 1 and not 0 isn't a big deal, so I guess just wondering why it works on 1 and not 0?