使用Twitter Bootstrap时,jQuery函数scrollTop无法正常工作

时间:2015-06-17 13:20:40

标签: javascript jquery twitter-bootstrap twitter-bootstrap-3 scrolltop

我遇到的情况是我将内容加载到覆盖窗口中,有时会使用overflow-y: auto;进行滚动,如果用户滚动然后再次单击该按钮,我希望滚动回到顶部,而不是他们最后离开的地方。

使用Bootstrap可以很好地使用 ,但是一旦开始使用bootstrap方法来显示/隐藏覆盖窗口,它就无法工作。

具体来说,这是不起作用的:

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

然而,无论出于何种原因 工作:

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

我已阅读此question但我没有使用bootstrap 模态,因此它并不适用于我;我也读过question,但接受的答案对我没有用。

示例代码:

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

必须将其设置为1而不是0并不是一件大事,所以我想只是想知道为什么它适用于1而不是0

0 个答案:

没有答案