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:

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:

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?

回答1:

Now with bootstrap 3 the events has change an can be achieved like this (plus a smooth animation to the top)

$('#modal').on('shown.bs.modal', function () {
    $('#modal').animate({ scrollTop: 0 }, 'slow');
});

回答2:

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

回答3:

On Bootstrap 4 (v4.0.0-alpha.6) the following worked well for me:

$('#Modal').show().scrollTop(0);

Please note as of bootstrap-4.0.0-beta.1 and Firefox 56.0.1 this does not seem to work correctly;

I checked IE11, MS Edge and Chrome and this works fine.

回答4:

Scroll up button has a class of: .page-scroll

Modal with a class of: .modal

JS to make scroll happen with the modal (JS could be simplified):

$('body').on('click', '.page-scroll', function(event) {
    var $anchor = $(this);
    $('html, body, .modal').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 1500, 'easeInOutExpo');
    event.preventDefault();
});

回答5:

There was change in boostrap where you need to use: on shown.bs.modal

Call a function when you show the modal window (I opted for this method)

<button onclick="showSMSSummary(); return false;" 
data-toggle="tooltip" title="Click To View Summary" 
class="btn btn-primary btn-sm">SMS Summary</button>

function showSMSSummary()
{
   $('#HelpScreenModalContent').modal('show');            
   $('#HelpScreenModal').animate({ scrollTop: 0 }, 'fast');
}

回答6:

ScrollTop bootbox modal on fadeIn The answer is in this issue.

When setting up bootbox dialog add .off("shown.bs.modal");this at the end.

bootbox.dialog({ ... }).off("shown.bs.modal");

It will scroll be at top when open dialog.

来源：https://stackoverflow.com/questions/17180621/jquery-scroll-to-top-of-bootstrap-modal

标签

javascript

jquery

twitter-bootstrap