JQuery scroll to top of 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, th

Answer 1

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 2

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

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

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