JQuery 滚动到 Bootstrap Modal 的顶部

Question

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?

Answer 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');
});

Answer 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

Answer 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.

Answer 4

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

2. Modal with a class of: .modal

3. 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(); });

Answer 5

In Bootstrap 4, the following works for me:

$('.modal-body').scrollTop(0);

You need to scrollTop on the modal-body because the parent elements (modal, modal-dialog, modal-content) are containers and do not scroll with the user.

However, if you prefer a less jerky movement, try the animation route:

$('.modal-body').animate({scrollTop: 0},400);

Answer 6

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');
}

Answer 7

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.