Adi Bradfield Adi Bradfield - 10 months ago 174
Javascript Question

JQuery scroll to top of Bootstrap Modal

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:


<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 id="modal-content" class="modal-body">
<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>


function openModal(heading, url) {
url: url,
cache: false
}).done(function( html ) {
$('#modalPrint').attr('onClick', 'loadPrintDocument(printCookies, {attr : "href", url : '+ url +', showMessage: false, message: "Please wait while we create your document"})');

As you can see, I've tried scrolling to the top after the modal has been shown. Any ideas?


Okay I've answered my own question. For anyone else with this issue, simply add this function to your JS!

$('#modal').on('shown', function () {

I will leave this question up, as there isn't one similar (that I could find) and it may help someone