我遇到的情况是我将内容加载到覆盖窗口中,有时会使用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
?