JQuery прокрутите вверх до Bootstrap Modal

В настоящее время я использую модуль загрузки bootstrap для отображения длинных юридических сообщений на веб-сайте, который я разрабатываю, но проблема в том, что если вы открываете один модальный за другим, второй уже прокручивается в любую позицию первый один был. Поэтому я ищу способ прокрутки div вверху с помощью JS/JQuery. Это код, который я использую в настоящее время:

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

Как вы можете видеть, я пробовал прокрутку вверху после того, как был показан модальный. Любые идеи?

Ответы

Ответ 1

Хорошо, я ответил на свой вопрос. Для кого-либо еще с этой проблемой просто добавьте эту функцию в свой JS!

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

Я оставлю этот вопрос, так как нет никого подобного (что я мог бы найти), и это может помочь кому-то

Ответ 2

Теперь с загрузкой 3 произойдут изменения событий, которые могут быть достигнуты как это (плюс плавная анимация вверх)

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

Ответ 3

Кнопка прокрутки имеет класс: .page-scroll

Модален с классом: .modal

JS, чтобы сделать свиток с модальным (JS можно упростить):

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

Ответ 4

Было отмечено изменение в boostrap, где вам нужно использовать: на show.bs.modal

Вызов функции при показе модального окна (я выбрал этот метод)

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

Ответ 5

В Bootstrap 4 (v4.0.0-alpha.6) для меня работало хорошо:

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

Обратите внимание, что с bootstrap-4.0.0-beta.1 и Firefox 56.0.1 это не работает корректно;

Я проверил IE11, MS Edge и Chrome, и это отлично работает.

Ответ 6

ScrollTop bootbox modal на fadeIn Ответ на этот вопрос.

При настройке диалога bootbox добавьте .off("shown.bs.modal"); в конец.

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

Он будет прокручиваться вверху при открытии диалога.