64

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?

7 Answers 7

77

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');
});
4
  • 1
    Looks like I'll have to upgrade to the new bootstrap if you can do things like that! Aug 29, 2013 at 0:03
  • In this case it would be better not to have an animation, so that the modal was already scrolled to the top as soon as it opened, since from the user's perspective, it's a completely new modal unrelated to the last one.
    – pimlottc
    Jan 20, 2014 at 18:33
  • Also note (assuming the approved answer is correct), both the event name and the object to be scrolled have changed (the modal div itself vs the modal's content div).
    – pimlottc
    Jan 20, 2014 at 18:42
  • For some reason this only works when referecing the modals ID, i.e. #modal and not the class, i.e. .modal Nov 18, 2015 at 12:03
66

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

2
  • 1
    Doing it on hide instead of on shown might make for a smoother presentation Nov 5, 2016 at 1:19
  • 2
    it is a class. .modal-content
    – Rohit Agre
    Feb 12, 2018 at 7:11
7

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.

7

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);
1
  • 1
    thank you for this elegant solution and explanation - i was struggling with the other answers, getting frustrated - this '.animated' upgrade worked as desired with Bootstrap v5.1.0 - thanks
    – Mark
    Mar 28, 2022 at 6:25
3
  1. Scroll up button has a class of: .page-scroll

enter image description here

  1. Modal with a class of: .modal

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

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

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.