JQuery滚动到Bootstrap Modal的顶部 [英] JQuery scroll to top of Bootstrap Modal
问题描述
我目前正在使用bootstrap模式插件在我正在设计的网站上显示长法律消息,但问题是如果你打开另一个模态,第二个已经滚动到任何位置第一个是。所以我正在寻找一种使用JS / JQuery将div滚动到顶部的方法。这是我目前正在使用的代码:
I'm currently using the bootstrap modal plugin to display long legal messages on a website I'm designing, but the problem is that if you open one modal after the other, the second one will already be scrolled to whatever position the first one was. So I'm looking for a way to scroll a div to the top with JS/JQuery. This is the code I'm using currently:
HTML:
<!--MODAL-->
<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="modalTitle"></h3>
</div>
<div id="modal-content" class="modal-body">
</div>
<div class="modal-footer">
<button id="modalPrint" class="btn btn-info hidden-phone" onClick=''>Print</button>
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
Javascript:
Javascript:
function openModal(heading, url) {
$.ajax({
url: url,
cache: false
}).done(function( html ) {
$("#modal-content").html(html);
$("#modalTitle").html(heading);
$('#modalPrint').attr('onClick', 'loadPrintDocument(printCookies, {attr : "href", url : '+ url +', showMessage: false, message: "Please wait while we create your document"})');
$('#modal').modal('show');
$("#modal-content").scrollTop(0);
});
}
正如你所看到的,我尝试在模态后滚动到顶部已经显示过。有什么想法?
As you can see, I've tried scrolling to the top after the modal has been shown. Any ideas?
推荐答案
好的,我已经回答了我自己的问题。对于有此问题的其他人,只需将此功能添加到您的JS!
Okay I've answered my own question. For anyone else with this issue, simply add this function to your JS!
$('#modal').on('shown', function () {
$("#modal-content").scrollTop(0);
});
我会留下这个问题,因为没有一个类似的(我能找到)和它可以帮助某人
I will leave this question up, as there isn't one similar (that I could find) and it may help someone
这篇关于JQuery滚动到Bootstrap Modal的顶部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!