CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Adi Bradfield
Adi Bradfield

Reputation: 2093

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?

Upvotes: 67

Views: 103171

Answers (7)

Nick
Nick

Reputation: 495

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

Upvotes: 9

BernardV
BernardV

Reputation: 766

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.

Upvotes: 7

Stephanie
Stephanie

Reputation: 121

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.

Upvotes: 0

Elim Garak
Elim Garak

Reputation: 1817

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

Upvotes: 3

user1040259
user1040259

Reputation: 6509

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

Upvotes: 3

antonio-gomez
antonio-gomez

Reputation: 810

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

Upvotes: 79

Adi Bradfield
Adi Bradfield

Reputation: 2093

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

Upvotes: 66

Related Questions