6

I have a modal window Bootstrap with dynamic height (more than height of screen). How can I scroll the window to bottom programmatically? I tried to do this:

$('#modal').animate({ scrollTop: $('#modal').height() }, 500);

But variable $('#modal').height() is not changing while I'm resizing window. Any ideas?

makandroid
  • 159
  • 1
  • 7

5 Answers5

7

Solution is very easy: 

$('#modal').animate({ scrollTop: $('#modal .modal-dialog').height() }, 500);
makandroid
  • 159
  • 1
  • 7
1

The other solution did not work for me however it was close.

Here is what worked for me: 

$('#modal').animate({ scrollTop: $('#modal .modal-content').height() }, 'slow');
chandler
  • 1,134
  • 1
  • 17
  • 33
1

Here is a modification of the working answer, this will scroll to the bottom of the modal. The other option did not get to the bottom but stopped at the middle.

    $("#modal .modal-body").animate({ scrollTop: $('#modal .modal-body').prop("scrollHeight")}, 'slow');

Remember to replace '#modal' with the Name of your own modal.

You might also want to make sure it works when you open the modal

   <script>
      $('#modal').on('shown.bs.modal', function () {
      $("#modal .modal-body").animate({ scrollTop: $('#modal .modal-body').prop("scrollHeight")}, 'slow');
    });
    </script>
Vee Joe
  • 31
  • 3
0

For Scrolling of Bootstrap modal window to bottom, here is what worked for me:

$('#modal .modal-body').animate({ scrollTop: $('#modal .modal-body').offset().top }, 'slow');
Azhar
  • 75
  • 1
  • 4
0

With the new Bootstrap V5.x, you can now use:

jQuery('#modal').animate({ scrollTop: jQuery('#modal.modal-content').height() }, 'slow');
Doc Hojo
  • 1
  • 2