JQuery scorre verso l'alto di Bootstrap Modal

Question

Attualmente sto usando il plug-in modale di bootstrap per visualizzare lunghi messaggi legali su un sito Web che sto progettando, ma il problema è che se apri una modale dopo l'altra, la seconda già scorrere verso qualsiasi posizione fosse la prima. Quindi sto cercando un modo per scorrere un div in alto con JS/JQuery. Questo è il codice che sto utilizzando attualmente:

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

Come potete vedere, ho provato lo scorrimento verso l'alto dopo che il modal è stata mostrato. Qualche idea?

Answer 1

Okay, ho risposto alla mia domanda. Per chiunque altro abbia questo problema, aggiungi semplicemente questa funzione al tuo JS!

$('#modal').on('shown', function() { 
    $("#modal-content").scrollTop(0); 
}); 

lascerò questa domanda su, come non ce n'è uno simile (che ho potuto trovare) e può aiutare qualcuno

Answer 2

Ora con bootstrap 3 gli eventi è cambiata una può essere raggiunto in questo modo (più un un'animazione fluida verso l'alto)

$('#modal').on('shown.bs.modal', function() { 
    $('#modal').animate({ scrollTop: 0 }, 'slow'); 
}); 

Answer 3

1. scorrere fino pulsante ha una classe di: .pagina-scorrere

2. modale con una classe di: .modal

3. JS di far accadere di scorrimento con il modale (JS potrebbe essere semplificato):

   $('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 4

C'era variazione di bootstrap in cui è necessario utilizzare: il shown.bs.modal

chiamare una funzione quando si mostra la finestra modale (ho optato per questo metodo)

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

ScrollTop bootbox modal on fadeIn La risposta è in questo problema.

Al momento della configurazione della finestra di dialogo bootbox aggiungere .off("shown.bs.modal"); alla fine.

bootbox.dialog({ ... }).off("shown.bs.modal");

Sarà scorrere essere al top quando è aperto dialogo.

Answer 6

On Bootstrap 4 (v4.0.0-alpha.6) quanto segue funzionato bene per me:

$('#Modal').show().scrollTop(0); 

Si prega di notare come di bootstrap-4.0.0-beta.1 e Firefox 56.0.1 non sembra funzionare correttamente;

Ho controllato IE11, MS Edge e Chrome e tutto funziona correttamente.